An Introduction to HTML5 Canvas API

Table of Contents

• Introduction
• The <canvas> element
• Rendering Context
• Creating your first canvas drawing
• Fallback and Support

Introduction

The Canvas API is used for creating graphics using javascript and <canvas> element. You can use canvas for drawing graphics, manipulating photos, creating animations, developing games, visualizing data, etc.

The Canvas API is mainly used for 2D graphics. For creating 3D graphics, WebGL API is used which also uses <canvas> element internally. So let’s get started right away and learn how to create cool graphics for your next projects using canvas.

The <canvas> element

<canvas id="myCoolGraphics" width="150" height="150"></canvas>

The canvas element has two attributes width and height. Both of these attributes are optional and can be set using javascript. If none of the attributes are set, the initial width of the canvas element will be set to 300px and the initial height of the canvas element will be set to 150px.

You can also use CSS to set the width and height of the canvas but it should respect the dimensions of your drawing else it will appear distorted.

The id attribute is used to uniquely identify the canvas element so that it will be easy for us to refer to it in our script.

Rendering Context

The HTML Canvas element <canvas> creates a drawing surface for you. But to create graphics on it, javascript is used. For drawing on the canvas, a rendering context should be selected first. To create a 2d drawing, we need to set rendering context to "2d". By doing so, we will get access to different properties and methods for creating a 2d drawing.

We can set the rendering context using the getContext() method of the canvas element.

var canvas = document.getElementById(‘myCoolGraphics’);
var ctx = canvas.getContext(‘2d’);

To check for browser support for Canvas API in the script, we can do so by just checking the presence of the getCotext() method.

var canvas = document.getElementById('coolGraphics'); 
if (canvas.getContext) {
  var ctx = canvas.getContext('2d'); 
  // graphics code 
} else {
 // fallback code 
}

Creating your first canvas drawing

Let's create a simple rectangle to start with.

var canvas = document.getElementById('canvas'); 
if (canvas.getContext) {
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green'; 
  ctx.fillRect(10, 10, 50, 50); 
}

We have used fillStyle and fillRect in the above code to create a rectangle, we will learn more about them in the next article.

Fallback and Support

The support of the canvas element in modern browsers is excellent. You can refer caniuse.com to see the complete list of browsers and their support level for the canvas element.

It is also very easy to provide fallback content for the canvas element. Unlike an <img> alt attribute which allows only text to be provided when the image fails to load, in canvas, you can provide an image of your graphics as fallback content.

<canvas id="myCoolGraphics" width="150" height="150"> 
  <img src="images/coolGraphics.png" width="150" height="150" alt=""/> 
</canvas>

For this reason, the closing tag in the canvas element is not optional.

We will learn more about canvas in the next article. Have a nice day :)

If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.

We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels (twitter, Facebook, LinkedIn).