Canvas 2D Context

Part 6. Working with Images

The instrument to render images on the canvas plane is the drawImage method assuming one of three forms. The simplest way to draw an image is to pass an image source to the method and provide x and y coordinates of the point where the upper left corner of the image is to be placed. Another approach is to specify the width and height of the image to be drawn in addition to the coordinates of the upper left point: it can result in creating a smaller (or bigger) copy of the source image. And the third signature of the drawImage method presumes the use of coordinates and dimensions of both source and destination images. As for image sources, another canvas, an HTML image element, or a video element can be utilized. In the example below the source is a canvas where the filled arc is drawn. The source canvas is used to draw a sequence of images on the target canvas plane:

// image source canvas
var sourceCanvas=document.getElementById("imageSource");
var auxiliaryContext=sourceCanvas.getContext("2d");
auxiliaryContext.fillStyle="magenta";
auxiliaryContext.beginPath();
auxiliaryContext.arc(50, 50, 30, 0.0, 6.28);
auxiliaryContext.fill();

// drawing a sequence of images
var targetCanvas=document.getElementById("targetSurface");
var renderingContext=targetCanvas.getContext("2d");
var x;
var y=10;
for(x=10;x<300;x+=60) {
 renderingContext.drawImage(sourceCanvas, x, y);
}

image source

Let's modify dimensions intrinsic to the image source. Below is an example of using an HTML image element as a source to render three images. The source image has width and height values equal to 256. At first the target image is drawn with the dimensions of 50, then 100, and the last image preserves the width and height of the source:

// image source: width=256; height=256
var img=document.getElementById("imageSource");

//drawing a sequence of images
var targetCanvas=document.getElementById("targetSurface");
var renderingContext=targetCanvas.getContext("2d");
renderingContext.drawImage(img, 10, 10, 50, 50); // x, y, width, height
renderingContext.drawImage(img, 50, 50, 100, 100); // x, y, width, height
renderingContext.drawImage(img, 100, 100); // only x, y

image source

The most flexible solution is to manipulate image fragments. To achieve this purpose, the drawImage(source, sx, sy, sw, sh, dx, dy, dw, dh) will be used. The sx and sy parameters hold the coordinates of the upper left corner of the source fragment, sw and sh are the fragment's dimensions. The rest of the parameters are characteristics of the target image. In the next example a source video frame has the width of 160 and height of 120. The frame is employed as a source of the first image rendered on the canvas. Then a square fragment (50 units wide and 50 units high) is "cut" from the frame starting from the point (100, 40). The extracted fragment displaying part of the frame is the source of the second image drawn on the canvas plane:

// image source - HTMLVideoElement
var video=document.getElementById("imageSource");

// drawing two images
var targetCanvas=document.getElementById("targetSurface");
var renderingContext=targetCanvas.getContext("2d");
renderingContext.drawImage(video, 10, 10); // the captured frame is rendered with its intrisic width and height
renderingContext.drawImage(video, 100, 40, 50, 50, 10, 200, 50, 50); // only a fragment of the above frame is drawn

Summary: Drawing Images

context.drawImage(image, x, y)
context.drawImage(image, x, y, width, height)
context.drawImage(image, srcX, srcY, srcWidth, srcHeight, destX, destY, destWidth, destHeight)
image is HTMLCanvasElement, HTMLImageElement or HTMLVideoElement