HTML5 Canvas: Images
Jakob Jenkov |
The HTML5 canvas has options for drawing images onto it. You do so using the
various drawImage()
functions on the 2D Context object. 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 draw. How to create and load an image
is explained later in this text.
The dx
and dy
parameters are short for "destinationX" and "destinationY".
These parameter determine where on the canvas the image is drawn.
The dw
and dh
parameters are short for "destinationWidth" and "destinationHeight".
These parameters determine the size to scale the image to when drawing it.
The sx
and sy
parameters are short for "sourceX" and "sourceY". These parameters
determine from where in the source image to start copying a rectangle of the image onto the canvas.
The sw
and sh
parameters are short for "sourceWidth" and "sourceHeight"
Creating and Loading Images
Before you can draw an image on the canvas you need to create an Image
object,
and load the image into memory. Here is how that is done in JavaScript:
var image = new Image(); image.src = "http://jenkov.com/images/screenshots/tutorials-screenshot.png";
Before you can draw the image, the image must be fully loaded. To determine if an image is fully loaded, you attach an event listener to the image. This event listener is called when the image is loaded. Here is how that looks:
image.addEventListener('load', drawImage1);
The drawImage1
parameter is a function that is called when the event fires.
Here is a full code example that creates, loads and draws an image on a canvas:
window.onload = function() { drawEx1(); } var image1 = null; function drawImage1() { var canvas = document.getElementById("ex1"); var context = canvas.getContext("2d"); context.drawImage(image1, 10, 10); } function drawEx1() { image1 = new Image(); image1.src = "https://jenkov.com/images/java-concurrency/java-concurrency-video-screenshot-small.jpg"; image1.addEventListener('load', drawImage1); }
Here is the result of the above code when drawn on a canvas:
Scaling the Image
As mentioned in the beginning of this text, you can scale the image when you draw it. Here is a code example that draws an image and scales it to a width of 200 and a height of 100 pixels:
var width = 250; var height = 100; context.drawImage(image2, 10, 10, width, height);
Here is how the image looks when drawn on a canvas, with the scaled width and height:
Drawing Parts of Images
It is possible to only draw a part of an image onto a canvas. The part drawn is a rectangle copied from the image. Here is code example:
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 sx
, sy
, sw
and sh
parameters
declare from where (sx,sy
) in the image the rectangle starts, and the
width (sw
) and height (sh
) of the rectangle.
Here is what the rectangle of the image looks like when drawn on a canvas:
Tweet | |
Jakob Jenkov |