HTML5 Canvas-Using Images - HTML 5

How to import images into a canvas in HTML5?

This chapter gives a brief description on how to import and export images into a canvas and drawing on that image by using below methods

Sr.No.

Method and Description

1

beginPath()

beginPath() method is used to reset the current path.

2

moveTo(x, y)

moveTo(x, y) method is used to create a new sub path with a given point.

3

closePath()

closePath() method is used for marking the current sub path as closed, and starts a new sub path with a point same as the start and end of the newly closed sub path.

4

fill()

fill() method is used to fill the sub paths with the current fill style.

5

stroke()

stroke() method is used to stroke the sub paths with current stroke style.

6

drawImage(image, dx, dy)

drawImage(image, dx, dy) method is used to draw a given image into the canvas. Here image acts as a reference to other image or canvas object. X and Y form the coordinate on the target canvas where the image is placed.

Example

Below is a simple example is used to import and draw on an image.

Output

using images

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 5 Topics