HTML5 Canvas draws images

HTML5 The canvas uses drawImage() to draw images, before drawing images on the canvas, an Image object needs to be created, and then the image is loaded into memory.

HTML5The canvas has options for drawing images on it. You can use drawImage()2Various functions on the D context object are used to perform this operation. There are three different drawImage() functions:

drawImage(image, dx, dy);
drawImage(image, dx, dy, dw, dh);
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

The first parameter image is the image to be drawn. This article will explain how to create and load images later.
In dx and dy parameters are short for 'destinationX' and 'destinationY'. These parameters determine the position where the image is drawn on the canvas.
In dw and dh parameters are short for 'destinationWidth' and 'destinationHeight'. These parameters determine the size of the image when scaled during drawing.
In sx and sy parameters are short for 'sourceX' and 'sourceY'. These parameters determine the position from which the image rectangle is copied to the canvas.
In sw and sh parameters are short for 'sourceWidth' and 'sourceHeight'.

Create and load image

Before drawing an image on the canvas, you need to create an Image object and then load the image into memory. This is a method done with JavaScript:

var image = new Image();
image.src = "https://www.oldtoolbag.com/en/run/html/canvas-shot.png";

must be fully loaded before the image can be drawn. To determine if the image is fully loaded, attach an event listener to the image. This event listener will be called when loading the image. It looks like this:

image.addEventListener(' load' drawImage1);

The drawImage1The parameter is the function called when the event is triggered.
This is a complete code example that can create, load, and draw images on the canvas:

window.onload = function() {
　　　　drawEx1();
}
var image1　= null;
function drawEx1() {
　　　　image1　= new Image();
　　　　image1.src =
　　　　　　　　"https://www.oldtoolbag.com/en/run/html/canvas-shot.png";
　　　　image1.addEventListener(' load' drawImage1);
}
function drawImage1() {
　　　　var canvas = document.getElementById("ex1");
　　　　var context = canvas.getContext("2d");
　　　　context.drawImage(image1,　10,　10);
}

This is the result of the above code when drawing on the canvas:

HTML5 Canvas not supported

Scale image

As described at the beginning of this article, you can scale an image when drawing it. This is an example code that draws an image and scales it to200 width and100 pixel height:

var width =　200;
var height =　100;
context.drawImage(image2,　10,　10, width, height);

This is the appearance of the image on the canvas when drawing, with scaled width and height:

HTML5 Canvas not supported

Drawing a Part of the Image

It is possible to draw only a part of the image on the canvas. The part drawn is a rectangle copied from the image. Here is an example code:

var dx =　10;
var dy =　10;
var dw =　75;
var dh =　75;
var sx =　20;
var sy =　20;
var sw =　75;
var sh =　75;
context.drawImage(image3, sx, sy, sw, sh, dx, dy, dw, dh);

The parameters are sx, sy, sw, and sh (declare sx, sy as the starting point of the rectangle) image, and the rectangle with width (sw) and height (sh).

This is the appearance of the image rectangle when drawing on the canvas:

HTML5 Canvas not supported