HTML 5 Canvas Element (Simplified) With Basic Examples

HTML 5 Canvas Element is best element out of the other, that I like the most. Suppose you want to add text, images, videos or embed an iframe, there are certain elements present that let you do this.

But I say, if you want to manipulate some part or whole of an image or video, then what will you do? Here <Canvas> comes into picture.

Canvas Element lets us take a picture or a video (a frame of video) and access or change its pixel content so that we can manipulate as we want. Basically canvas is like a real canvas that we use to paint. Similarly in a web page you can use canvas element to draw shapes, fill them with different colors, adding and manipulating images, etc.

Basic Example

Here is a basic example. To use canvas add a canvas element with a unique id, to refer it with JavaScript later. Also, mentioning height and width is also possible, just <img> element, and if you are not sure, you can later set it with JavaScript.

HTML:


    <canvas id="mycanvas">
Canvas Not Supported!
</canvas>

The above HTML will create a canvas with default height and width (usually 150x300 px).

However, the canvas element has also maximum height and width limit in different browsers in different operating systems. You can check out here the maximum size limits of the canvas element in different browsers.

Now if you want to draw a line, you can draw it with lineTo(x,y) function. We first get 2d context using canvas.getContext("2d") method.

JavaScript:

var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke();

In the 2D context we move yo 0,0 coordinates and then go to 100,100 in the plane. The stroke() function strokes the line or pattern that we made.

Output:

I've added 1px solid black border to canvas, so that the canvas element can be identified in the above output.

Similarly a circle or arc can be drawn using context.arc() method like shown below.

JavaScript:

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

Here the first 40, 40 stands for the center x, y coordinates in the 2D plane.

The 3rd parameter is the radius of the arc or circle, which is 40 px in the above example.

Fourth parameter is starting angle, which is set to 0 in the above code.

Last parameter is the end angle, which is expressed in radians. So we have to multiply Pi * 2 to get a full circle as pi = 180 degrees. If you want half circle or arc, use 1 * Math.PI or simply Math.PI .

The beginPath() method of the Canvas 2D API starts a new path by emptying the list of sub-paths. Its like pulling up pen before drawing another shape.

This will produce the output like shown below.

Adding Text in Canvas

Using fillText("text",x,y) we can add text in the canvas, like below.

JavaScript:

ctx.font = "30px fantasy";
ctx.fillText("CSSMAGZ",0,30);

ctx.font = "28px math";
ctx.fillText("CSSMAGZ",0,60);

You can choose font using context.font property. Also stroking text is possible :

ctx.font = "50px fantasy";
ctx.strokeText("CSSMAGZ",0,60);

This will produce output like follows.

Similar to fillText(), there exists a fillRect() to create a rectangle.

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 150, 50);

Output:

Applications Of Canvas

The Canvas element is a powerful feature of HTML5 that allows us to create dynamic graphics, animations, and interactive video and audio on web pages in real-time. It is a resolution-dependent bitmap canvas that can be used for rendering graphs, game graphics, art, or other visual images on the fly. The Canvas element can be used to develop productive graphics and design simple to complex animations such as sparkling stars. It can also be used for website interactivity as it can respond to JavaScript events and user actions.

The Canvas element is a great alternative to Adobe Flash, as it is natively supported by web browsers and can interact with the DOM in many ways. It is also easy to turn a plain web page into a dynamic web application and then convert that application into a mobile app for use on smartphones and tablets.

In summary, the Canvas element is a versatile tool that can be used to create a wide range of dynamic and interactive content on web pages.

Conslusion

The CanvasRenderingContext2D interface provides various methods and properties. You can access the API docs on MDN.

From there you can view different examples on the methods and properties that the interface provides and can make some graphics on your website or blog. You can also make charts, heatmaps, editing tools, games and much more. However, directly using this API can make whole process complex, therefore, various set of libraries are already available, can be used.

There are many of them, with different specialties of each, for example easeljs.

Thanks for reading this article, if you got any questions, please type in the comment box below.