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() 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.
var variableName = canvas.getContext(2d);
variableName.drawImage(image,x,y);
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.
var variableName = canvas.getContext(2d);
variableName.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 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.
var variableName = canvas.getContext(2d);
variableName.drawImage(image,sx,sy,sWidth,sHeight,px,py,pWidth,pHeight);
You can draw any number of images on a single canvas.
Open notepad or any other text editor, follow the following points.
save file with name task.html or task.htm and then open it using any browser and see results.