Drawing an Image to the Canvas

Just html + javascript+ imgur

by steveow

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');//orig
var img = new Image(); //...works OK

// When the image is loaded, draw it
img.onload = function () {
    
    
    var imgData = ctx.getImageData(0, 0, img.width, img.height);
    //var pix = imgData.data;
    //alert (pix);//...hmmm
    
    ctx.drawImage(img, 0, 0);
}

// Specify the src to load the image
//img.src = "http://i.imgur.com/gwlPu.jpg";
img.src ="http://i.imgur.com/dnKvT5h.jpg";//ok