Canvas multiple reborn color sine

by Denise Nepraunig

HTML

<canvas id="canvas" width="500" height="400" style="border:1px solid #000000;"></canvas>

JavaScript

// get the theory behind:
// http://nepraunig.com/wp/?p=150

// grab the canvas and context
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var canvaswidth = 500;
var canvasheight = 400;

// the shape object is a placeholder for all squares
// we are going to create
var Shape = function(x, y, width, height, xspeed, yspeed, color) { 
    this.x = x;
    this.y = y; 
    this.width = width; 
    this.height = height;
    this.xspeed = xspeed;
    this.yspeed = yspeed;
    this.color = color;
};

var Player = function(x, y, width, height, xspeed, yspeed, color) {
    this.x = x;
    this.y = y; 
    this.width = width; 
    this.height = height;
    this.xspeed = xspeed;
    this.yspeed = yspeed;
    this.color = color;
    this.moveUp = false;
    this.moveDown = false;
    this.moveLeft = false;
    this.moveRight = false;
};

var player = new Player(250, 390, 10, 10, 5, 5, "#000000");

window.onkeydown=function(e) {
    //console.log(e.keyCode);
    switch(e.keyCode) {
        case 37:
            player.moveLeft = true;
            break;
        case 38:
            player.moveUp = true;
            break;
        case 39:
            player.moveRight = true;
            break;
        case 40:
            player.moveDown = true;
            break;
    }
    
};
window.onkeyup=function(e) {
    //console.log("key up");
        switch(e.keyCode) {
        case 37:
            player.moveLeft = false;
            break;
        case 38:
            player.moveUp = false;
            break;
        case 39:
            player.moveRight = false;
            break;
        case 40:
            player.moveDown = false;
            break;
    }
};

// lots of random color functions here:
/* http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript */
function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color +=...