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

Get the senior executive’s handbook of important trends, tips, and strategies to compete and win in the digital economy.

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;

Read this guide to learn everything you need to know about RPA, and how it can help you manage and automate your processes.


Published at DZone with permission of Hemanth HM, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}