Drawing images

Basic example:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.  
  5.       window.onload = function() {
  6.         // It is necessary to wait for the web page to load before running this code.
  7.         var canvas = document.getElementById(“myCanvas”);
  8.         var context = canvas.getContext(“2d”);
  9.         var imageObj = new Image();
  10.         // Callback function called by the imageObj.src = …. line
  11.         //located after this function
  12.         imageObj.onload = function() {
  13.           // Draw the image only when we have the guarantee 
  14.           // that it has been loaded
  15.             context.drawImage(imageObj, 0, 0);
  16.          };
  17.  
  18.          // Calls the imageObj.onload function asynchronously
  19.          imageObj.src =
  20.           “http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png&#8221;;
  21.      };
  22.    
  23. </head>
  24. <body>
  25.     <canvas id=“myCanvas” width=“512” height=“512”></canvas>
  26. </body>
  27. </html>

There are numerous variants of the drawImage(…) context method at line 17:

    • drawImage(img, x, y): draws the image at position x, y, keeping the original image size.
    • drawImage(img, x, y, sizeX, sizeY): same as before except that the image drawn is resized.
    • drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh): for drawing sub-images, (sx, sy, sw, sh) define the source rectangle, while dx, dy, dw, sh define the target rectangle. If these rectangles don’t have the same size, the source sub-image is resized.

EXAMPLE 2:

  1. var imageObj = new Image();
  2.  
  3. imageObj.onload = function() {
  4.    // Try commenting/uncommenting the following lines to see the
  5.    // effect of the different drawImage variants
  6.    // Original, big image
  7.    // context.drawImage(imageObj, 0, 10);
  8.    // Original image drawn with size = 100×100 pixels
  9.    context.drawImage(imageObj, 0, 10, 100, 100);
  10.    // with size = 150×150
  11.    context.drawImage(imageObj, 80, 10, 150, 150);
  12.    // with size = 200×200
  13.    context.drawImage(imageObj, 210, 10, 200, 200);
  14.  
  15.   // draw the sub image at 0, 0, width = 512, height = 100
  16.   // at position 100, 250, with a width of 256 and a height of 50
  17.   context.drawImage(imageObj, 0, 0, 512, 100, 100, 250, 256, 50);
  18. };
  19. imageObj.src = http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png&#8221;;
  20. };

EXAMPLE 3: DRAW AN IMAGE DEFINED IN THE PAGE BY AN <IMG SRC=”…”>ELEMENT

  1. <body>
  2. <canvas id=“myCanvas” width=“512” height=“512”></canvas>
  3. <p>Original image as an <img> element:</p>
  4. <img id=“logo”
  5. src=http://fc07.deviantart.net/fs70/f/2013/149/b/8/texture_85_by_voyager168-d670m68.jpg&#8221;>
  6.      canvas = document.getElementById(“myCanvas”);
  7.      var ctx = canvas.getContext(“2d”);
  8.      var logo = document.querySelector(“#logo”);
  9.      ctx.drawImage(logo, 0, 0, 100, 100);
  10. </body>

Although you will find many examples on the Web that do it this way, they will only work most of the time with small images, or with images that are in the browser’s cache. Remember that you cannot draw an image that has not been fully loaded!

Best practice: only draw an image that is fully loaded, use
the
onload callback!

GOOD => the right way to do this is shown in this example: http://jsbin.com/faqedu/4/edit, that starts drawing only from the onload callback function:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.    var canvas, context;
  5.    window.onload = function() {
  6.       canvas = document.getElementById(“myCanvas”);
  7.       context = canvas.getContext(“2d”);
  8.  
  9.       draw();
  10.    };
  11.    function draw() {
  12.       var imageObj = document.querySelector(“#logo”);
  13.       console.log(“image is already loaded, we draw it!”);
  14.       context.drawImage(imageObj, 0, 10, 100, 100);
  15.    }
  16. </head>
  17. <body>
  18. <canvas id=“myCanvas” width=“512” height=“512”></canvas>
  19. </p>
  20. <img id=“logo” src=http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png&#8221;>
  21. </body>
  22. </html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s