HTML5 Canvas - Using Images
This tutorial would show how to import and external image into a canvas and then how to draw on that image by using following methods:
|SN||Method and Description|
This method resets the current path.
This method creates a new subpath with the given point.
This method marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.
This method fills the subpaths with the current fill style.
This method strokes the subpaths with the current stroke style.
drawImage(image, dx, dy)
This method draws the given image onto the canvas. Here image is a reference to an image or canvas object. x and y form the coordinate on the target canvas where our image should be placed.
Following is a simple example which makes use of above mentioned methods to import an draw on an image.
Assuming we have following image to import images/backdrop.jpg.
The above example would draw following shape:
To learn above concept - Do Online Practice using latest version of either Safari or Opera.