Previous Next

Canvas Image

You can get refference to images on same pages on the canvas by using image tag name or image id or image class such as document.images collection or document.getElementById() or document.getElementByClass() or document.getTagName() to retrieve specific image.

drawImage(image,x,y)

drawImage() method is used to draw image on canvas by using image paramter and co-ordinates (x,y), image parameter has image refference and refference can be id, image tag name, or class and the co-ordinates (x,y) are used for position of image on canvas.

Syntax

var variableName = canvas.getContext(2d);
variableName.drawImage(image,x,y);

drawImage(image,x,y,width,height)

drawImage() method is used to draw image on canvas by using image paramter and co-ordinates (x,y). You can define width and height of image in drawImage() method to scale the image or increase or decraese the size of image.

Syntax

var variableName = canvas.getContext(2d);
variableName.drawImage(image,x,y,width,height);

drawImage(image,sx,sy,sWidth,sHeight,px,py,pWidth,pHeight,)

drawImage() method is used to draw image on canvas by using image paramter and co-ordinates (x,y). You can define width and height of image and select any area of image to slice image by using co-ordinates (sx,sy,sWidth,sHeight), where sx and sy are the slice area for selection and sWidth and sHeight is the slice rectagle's or area's width and height and the co-ordinates (px,py,pWidth,pHeght) are for image position, width and heght, where px and py are image position and pWidth and pHeight are image width and height.

Syntax

var variableName = canvas.getContext(2d);
variableName.drawImage(image,sx,sy,sWidth,sHeight,px,py,pWidth,pHeight);

Practice Task

Open notepad or any other text editor, follow the following points.

• Use <canvas> element to draw canvas on webpage
• Assign id <Image> to canvas element
• Give width and height of 250 250 respectivelly
• Use inline style to style canvas element
• Give border and to canvas using css styles
• Border should be 3px solid orange
• Use javascript to draw image on canvas, select any picture

save file with name task.html or task.htm and then open it using any browser and see results.

Previous Next