Skip to main content

Canvas API

Introduction to HTML Canvas API

The HTML Canvas API is a powerful tool that allows you to draw 2D shapes, images, and text directly on the web pages. It is commonly used in game development, data visualization, photo editing, and animations. This tutorial will provide you with a comprehensive and beginner-friendly introduction to HTML Canvas API.

What is HTML Canvas?​

HTML Canvas is an HTML element which can be used to draw graphics via scripting in JavaScript. The canvas element itself is a container for graphics. It has no drawing abilities of its own. All the drawing must be done with JavaScript.

Here is how the canvas element looks in HTML:

<canvas id="myCanvas" width="500" height="500"></canvas>

The id attribute is used to select the element with JavaScript. width and height are used to define the size of the canvas.

Setting Up the Canvas​

Before we can start drawing on the canvas, we need to first get a reference to it in JavaScript. We do this by selecting it with the document.getElementById() method.

var canvas = document.getElementById('myCanvas');

Next, we need to create a context. The context is what we actually draw on. For 2D graphics, such as those covered by this tutorial, we use the getContext('2d') method.

var ctx = canvas.getContext('2d');

Now we're ready to start drawing!

Drawing on the Canvas​

There are several methods available for drawing paths, boxes, circles, text, and adding images. Let's review some of the most commonly used ones:

Drawing a Rectangle​

The fillRect(x, y, width, height) method draws a filled rectangle. The x and y parameters define the position of the top left corner of the rectangle, and width and height define the size of the rectangle.

ctx.fillRect(50, 50, 200, 100);

Drawing a Line​

To draw a line, we need to use a few methods together:

  • beginPath(): Creates a new path.
  • moveTo(x, y): Moves the pen to the specified coordinates.
  • lineTo(x, y): Draws a line from the current position to the specified coordinates.
  • stroke(): Strokes the current path with the current stroke style.
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 200);
ctx.stroke();

Drawing a Circle​

For a circle, we use the arc(x, y, radius, startAngle, endAngle, anticlockwise) method. The x and y parameters define the center of the circle, and the radius defines the size. The startAngle and endAngle parameters define the start and end of the circle in radians, and the anticlockwise parameter is a Boolean value which, when true, draws the circle anticlockwise.

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();

Conclusion​

This was a brief introduction to the HTML Canvas API. There is a lot more you can do with it. You can change colors, create gradients, alter line styles, and much more. As you become more familiar with it, you will find that it is a powerful tool for creating dynamic, interactive graphics for your web pages.