How to display an image (HTML)
[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]
The canvas element is a drawable region on your HTML document that you can use JavaScript for generating graphics such as animations, graphs, and games. This topic gets you started by describing the steps needed to display an image using the canvas element.
Prerequisites
This topic assumes that you:
- Can create a basic Windows app using JavaScript that uses the Windows Library for JavaScript template.
- Have a basic understanding of HTML and JavaScript.
For instructions on creating your first Windows app using JavaScript, see Create your first Windows Store app using JavaScript. For instructions on using the WinJS template, see How To Obtain and Use the WinJS Toolkit.
Instructions
Step 1: Obtain the rendering context
Before we can draw an image to our canvas, we need to obtain the rendering context from the canvas element. The rendering context is where all the drawing methods and properties are defined. Because each <canvas> element has an associated rendering context (often given the variable name ctx), we cannot access this context until the page has fully loaded (that is, until the canvas element is fully ensconced in the DOM). One way of ensuring that the canvas element is available from the DOM is by placing your script block at the end of the page, as shown:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Canvas element image drawing</title>
<style>
.
.
.
</style>
</head>
<body>
.
.
.
<script>
.
.
.
</script>
</body>
</html>
We can now obtain the rendering context as follows:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Canvas element image drawing</title>
<style>
canvas {
border: 1px black solid; /* Draw a border around the canvas element. */
}
</style>
</head>
<body>
<canvas width="491" height="538">Canvas is not supported - upgrade your browser.</canvas>
<script>
var ctx = (document.getElementsByTagName('canvas')[0]).getContext('2d');
</script>
</body>
</html>
As can be seen, the canvas element is expecting a 491px by 538px image. We obtain the context (ctx) by getting a list of all canvas elements within the DOM, picking the first (and only) one, and acquiring its context by calling getContext('2d').
Step 2: Load the image to be displayed
Because images can take an appreciable amount of time to download to the client, we should only access them after they have fully loaded. This can be done by using the image object onload event handler, as follows:
var imageToDraw = new Image();
imageToDraw.onload = function() {
// It is now safe to access the image.
}
imageToDraw.src = 'images/duckCat.jpg';
In this example, the anonymous function is called only after the associated image (duckCat.jpg) has fully loaded.
Step 3: Display the image
By using the onload event handler, we can display the image on the canvas as follows:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Canvas element image drawing</title>
<style>
body {
width: 402px; /* Accommodate the 1px canvas borders. */
margin: 0 auto; /* Center the page's content. */
}
h1 {
text-align: center;
}
canvas {
border: 1px black solid; /* Draw a border around the canvas element. */
}
</style>
</head>
<body>
<h1>How to display an image using the canvas element</h1>
<canvas width="491" height="538">Canvas is not supported - upgrade your browser.</canvas>
<script>
var ctx = (document.getElementsByTagName('canvas')[0]).getContext('2d');
var imageToDraw = new Image();
imageToDraw.onload = function() {
ctx.drawImage(imageToDraw, 0, 0);
}
imageToDraw.src = 'images/duckCat.jpg';
</script>
</body>
</html>
Remarks
The drawImage method accepts more parameters than shown in the prior example, and is quite powerful. For more information, see Using images on the Mozilla Developer Network website.