Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Introduction to HTML5 canvas element

Saturday, December 1st, 2018 by Servage

html5-canvasThe <canvas> element is probably the greatest addition to HTML5. This new element can be used to create anything from a single-color box to complex shapes and charts. We will take a look at how to build some simple shapes with the <canvas> element and learn what can be achieved with more advanced use of the element.

What is an HTML5 canvas?

In simple terms, a canvas is a <div> inside which you can render graphics. Those graphics can be simple shapes such as circles and boxes, or more complex graphics like charts and even animations.

A canvas can be created with the <canvas> tag. This might come as a surprise, but drawing to the canvas is done with JavaScript. This means you should to be familiar with JavaScript to be able to create canvas elements.

Drawing a rectangle

A rectangle is probably the easiest shape to draw. As mentioned earlier, you need a <canvas> tag to draw something. The canvas should also have an ID so that you can easily access the element with JavaScript. It is also a good idea to give height and width dimensions for the canvas. Here is an example of what it might look like: <canvas id=”my-canvas” height=”200” width=”200”></canvas>.

The next step is to draw the rectangle, which requires JavaScript. The necessary steps for this are finding the canvas element using getElementById(), getting the 2D context of the element using getContext(“2d”), adding styles to the canvas using fillStyle() and finally, filling the canvas with fillRect(). An example would look like this:

var element = document.getElementById(“my-canvas”).getContext(“2d”);
element.fillStyle = ”#abc123”;
element.fillRect(0, 0, 200, 200)

This draws a green rectangle that takes all space inside the canvas.

Other shapes

Rectangle is just one of the shapes you can draw into a canvas. Other shapes and elements include circles, lines and 2D or 3D text. These elements can be animated too! All these shapes are created the same way as the above rectangle example. First you have to find the canvas element and its 2D context, and then assign it some properties such as a color, and finally, draw it to the canvas.

Advanced canvases

As mentioned earlier, canvases can also be animated. Unfortunately, animating a canvas is often not an easy task and can take even hundreds of lines of JavaScript. On the other hand, it is possible to create some very advanced and beautiful animations such as particle effects and even full games using the HTML5 canvas. Try searching for HTML5 canvas animations and you will be amazed at what kind of things can be achieved with the canvas.

Introduction to HTML5 canvas element, 3.3 out of 5 based on 8 ratings
Categories: Guides & Tutorials, Tips & Tricks


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.