Drawing an Image to the Canvas

by Tgwizman

HTML

<canvas id="canvas" width="400" height="360">

CSS

canvas { background: #eeeeee; }

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var time = 0,
    delta = 0;

var player = {
    "config": {
        "keys": {
            "jump": 32,
            "left": 37,
            "right": 39
        },
        "actionKeys": {
            49: "speedBoost"
        }
    },
    "keys": {
        "jump": false,
        "left": false,
        "right": false
    },
    "effects": {
        "speedMultiplier": 1
    },
    "activeEffects": {},
    "position": {
        "x": 100.0,
        "y": 175.0
    },
    "velocity": {
        "x": 0.0,
        "y": 0.0
    },
    "gravity": 0.5,
    "onGround": false
};

var spells = {
    "speedboost": {
        "time": 3000,
        "startEffect": function() {
            player.speedMultiplier *= 2;
        },
        "endEffect": function() {
            player.speedMultiplier /= 2;
        }
    }
};

function StartJump(e) {
    console.log(e.keyCode);
    if (e.keyCode == player.config.keys.jump && player.onGround) {
        player.keys.jump = true;
        player.velocity.y = -10.0;
        player.onGround = false;
    }
}

function EndJump(e) {
    if (e.keyCode == player.config.keys.jump && player.velocity.y < -6.0) {
        player.keys.jump = false;
        player.velocity.y = -6.0;
    }
}

function StartLeft(e) {
    if (e.keyCode == player.config.keys.left) {
        player.keys.left = true;
        player.velocity.x = -4.0;
    }
}

function EndLeft(e) {
    if (e.keyCode == player.config.keys.left && player.onGround) {
        player.keys.left = false;
        player.velocity.x = 0.0;
    }
}

function StartRight(e) {
    if (e.keyCode == player.config.keys.right) {
        player.keys.right = true;
        player.velocity.x = 4.0;
    }
}

function EndRight(e) {
    if (e.keyCode == player.config.keys.right && player.onGround) {
        player.keys.right = false;
        player.velocity.x = 0.0;
    }
}

function CastSlot(e) {
    if (player.config[e.keyCode] !== null) {
...