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)

Featured pages

Overview

Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …

Tags

Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…

Welcome

 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …