Convert Any Image to HTML5 Canvas

Even before talking about the technicalities of converting an image to a canvas element, check out the demo!

DEMO input any image URL there and hit the convert button!

P.S : It also accepts data-uri!

The code :

function draw() {

    // Get the canvas element and set the dimensions. 
    var canvas = document.getElementById('canvas');
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;

   // Get a 2D context.
    var ctx = canvas.getContext('2d');

    // create new image object to use as pattern
    var img = new Image();
    img.src = document.getElementById('url').value;
    img.onload = function(){
        // Create pattern and don't repeat! 
       var ptrn = ctx.createPattern(img,'no-repeat');
       ctx.fillStyle = ptrn;
       ctx.fillRect(0,0,canvas.width,canvas.height);

    }

}

The Magic Behind :

All the credits goes to createPattern()

nsIDOMCanvasPattern createPattern(in nsIDOMHTMLElement image, in DOMString repetition);

Elobrating :

context.createPattern(image,“repeat|repeat-x|repeat-y|no-repeat”);

Hope this was useful, anyway there are loads of fun with the canvas element, happy hacking!

Edit 0

After the interesting question by @pinkham in the comment section, from the page of MDN :

Although you can use images without CORS approval in your canvas, doing so taints the canvas.

Provided that you have a server hosting images along with appropriate Access-Control-Allow-Origin header,

you will be able to save those images to localStorage as if they were served from your domain.

var img = new Image,
canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
src = "http://example.com/image"; // insert image url here

img.crossOrigin = “Anonymous”;

img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage( img, 0, 0 );
 localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );

}

img.src = src; // make sure the load event fires for cached images too if ( img.complete || img.complete === undefined ) {

  img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
  img.src = src;

}

P.S :