Submodule 15.1: Canvas HTML element

Canvas image

We can also add and edit images on Canvas.

The JavaScript code to achieve this is:

/*
* We create a Javascript Image object and set its source URL
* to the location of the image file we'll be inserting.
*/
var image0 = new Image();
image0.src = "images/chocolatethings.JPG";
/*
* Here's the handler that loads when the image has finished downloading.
*
* This needs to be asynchronous (triggered by the image load event) since we don't know how
* long the image will take to load.
*/
image0.onload = function(){
    /* draw the image in the canvas window */
    context1.drawImage(image0, 0, 0);
}

the above code will create a canvas displayed as: