---
title: "Convert Any Image to HTML5 Canvas"
description: "Even before talking about the technicalities of converting an image to a canvas element, check out the demo! DEMO input any."
url: "https://h3manth.com/scribe/convert-any-image-html5-canvas/"
canonical_url: "https://h3manth.com/scribe/convert-any-image-html5-canvas/"
markdown_url: "https://h3manth.com/scribe/blog/convert-any-image-html5-canvas.md"
publishDate: "2012-08-26T00:00:00.000Z"
author: "Hemanth HM"
category: "web"
tags: ["web"]
word_count: 287
reading_time_minutes: 2
x_markdown_tokens: 696
content_signal: "ai-train=yes, search=yes, ai-input=yes"
---

# 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.

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

[DEMO](http://h3manth.com/demo/canvas/i2c.html) 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 :