Logo
  Friday, August 22, 2014
Sign-In  |  Sign-Up  |  Contact Us  | Bookmark |  RSS Feed

HTML5 Tutorial FeedBurner

How to insert Images into a canvas in HTML5?  
HTML5 allows adding and manipulating images inside a canvas. Images can be modified, stretched and stamped with the help of HTML5 commands. However, there are considerations that you need to take into account while working with images inside a canvas. First, you need to make sure that image is fully loaded before applying any modifications. If you don’t wait, then you canvas will fail to load and error out.

In order to avoid this error we need to load image in the following manner

<script>

    function insertImageExample(context) {

    var img = new image();

    img.src = "myimage.jpg"

    img.onload = function() { drawImage(); }

    }

</script>

You can see that we call function after image has been loaded into canvas. OnLoad handler takes care of image load and we should not have problems with the canvas and partially loaded images.

In order for image to appear on the canvas as can simply run the following line of code

context.drawImage(img, -1,-10,1,10)

Print How to insert Images into a canvas in HTML5? Bookmark How to insert Images into a canvas in HTML5?

Related Articles  
HTML5 Gradient
Applying HTML5 gradient requires three steps to be completed. Creation of the gradient object, applying colors and call ...
HTML5 Canvas Transforms context.rotate(x) function
HTML5 provides several transform operations: scale, translate, rotate and others. Let’s look at the context.rotate(x) ...
Adding and drawing on canvas in HTML5
You can add canvas to your HTML5 page with the help of HTML5 tag called canvas.
Using HTML5 Canvas
HTML5 canvas element creates rectangular area on your HTML5 webpage. It is defaulted at 350 by 150 pixels which can be ...
Applying CSS to the HTML5 Canvas
CSS can be applied to the HTML5 canvas and you can do pretty much same things with canvas as with images and other ...
HTML5 Fill Styles
HTML5 canvas allows you to fill paths and subpaths. The Fill Styles are used for this purpose and you can do it with ...
More