Over a million developers have joined DZone.

Convert Any Image to HTML5 Canvas

DZone's Guide to

Convert Any Image to HTML5 Canvas

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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;

The Magic Behind :

All the credits goes to createPattern()

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

Elobrating :


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;

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}