Javascript canvas game components

utils.js

//Keymap
var keys = {
  up: 38,
  down: 40,
  left: 37,
  right: 39,
  key_z: 90,
  key_x: 88,
  return: 13,
  escape: 27,
  space: 32,
  key_w: 87,
  key_a: 65,
  key_s: 83,
  key_d: 68,
  backspace: 8,
  tilde: 192,
  shift: 16,
  control: 17
};

//Rectangle Collision
function RectCollision(rect1, rect2) {
  if (rect1.x < rect2.x + rect2.width &&
   rect1.x + rect1.width > rect2.x &&
   rect1.y < rect2.y + rect2.height &&
   rect1.height + rect1.y > rect2.y) {
    return true;
  } else {
    return false;
  }
}

//Point Distance (x1,x2,y1,y2)
function distance(x1, x2, y1, y2) {
  var a = x1 - x2
  var b = y1 - y2
  return Math.sqrt( a*a + b*b );
}

//Rectangle compatable Vector
function Vector2(x,y) {
  this.x = x;
  this.y = y;
  this.width = 1;
  this.height = 1;
}

//Rectangle
function Rect(x,y,w,h) {
  this.x = x;
  this.y = y;
  this.width = w;
  this.height = h;
}

//Get random
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

//Wrap Text
//DOES NOT LAG
//Credit: http://stackoverflow.com/a/17777674
CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {

    var lines = text.split("\n");

    for (var i = 0; i < lines.length; i++) {

        var words = lines[i].split(' ');
        var line = '';

        for (var n = 0; n < words.length; n++) {
            var testLine = line + words[n] + ' ';
            var metrics = this.measureText(testLine);
            var testWidth = metrics.width;
            if (testWidth > maxWidth && n > 0) {
                this.fillText(line, x, y);
                line = words[n] + ' ';
                y += lineHeight;
            }
            else {
                line = testLine;
            }
        }

        this.fillText(line, x, y);
        y += lineHeight;
    }
}

/*

  Following commented out, incase you want to just include this in your project :)

//Mockup "player" class
function Player(x,y) {
  this.x = x;
  this.y = y;
  this.xvel = 0;
  this.yvel = 0;
  this.width = 25;
  this.height = 25;
  
  this.draw = function() {
    cx.fillStyle = "white";
    cx.fillRect(this.x, this.y, this.width, this.height);
  }
  
  this.update = function() {
    this.x += this.xvel;
    this.y += this.yvel;
  }
  
  this.keyup = function() {
  }.bind(this);
  
  this.keydown = function() {
  }.bind(this);
}

//
//Main Boiletplate
//
var canvas = document.getElementById("display");
var cx = canvas.getContext("2d");
var width = 800, height = 600;
function update() {
  //Handle Movement and Collisions
}

//Main draw loop
function draw() {
  //Background
  cx.fillStyle = "black";
  cx.fillRect(0,0,width,height);
  //Draw objects
  update();
  requestAnimationFrame(draw);
}

function keyup(code) {
}

function keydown(code) {
}



function init() {
  document.addEventListener("keyup", function(e) {
    keyup(e.keyCode);
  },false);
  document.addEventListener("keydown", function(e) {
    keydown(e.keyCode);
  },false);
  canvas.addEventListener("mousemove", function(e) {
    var mouse_x = e.clientX - cx.canvas.offsetLeft;
    var mouse_y = e.clientY - cx.canvas.offsetTop;
  },false);
}

*/