Drawing an Image to the Canvas

HTML

<canvas id="c" width="800" height="600"></canvas>

CSS

body {
    background: #CEF;
}

JavaScript

// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');



// Create an image element
var img = document.createElement('IMG');

// When the image is loaded, draw it
img.onload = function () {
    ctx.drawImage(img, 0, 0);
}

// Specify the src to load the image
img.src =...