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

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

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;

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}