Canvas image example

by erickzanardo

HTML

<canvas id="mycanvas" width="400" height="300"></canvas>

CSS

canvas {
    border: 1px solid #000;
}

JavaScript

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

var img = new Image();
img.src = 'http://www.freephotosbank.com/photographers/photos1/5/med_bb124s2577.jpg';
img.onload = function() {
    ctx.drawImage(img, 0, 0);
};