HTML Canvas API – Beginner tutorial

August 11, 2018 Leave a comment

According to MDN,

<canvas> is an HTML element which can be used to draw graphics using scripting (usually JavaScript). This can, for instance, be used to draw graphs, make photo composition or simple (and not so simple) animations. The images on this page show examples of <canvas>implementations which will be created in this tutorial.

Here, I will be playing with the canvas API with javascript. This will be mostly code and I will explain the code using comments. Let’s jump in

Click on Result tab to see the output

Drawing lines on HTML5 canvas using canvas API
Drawing circle on HTML5 canvas using canvas API – arc
quadradicCurveTo A more complex arc that allows you to control the steepness of the curve
bezierCurveTo is another complex arc that can skew
rect, createRadialGradient, addColorStop, fillStyle and  fill
Example from the book 70-480 Exam Ref

Enjoy canvasing!!

Next

To learn more about Canvas please check the canvas tutorial from MDN If you want to play with some nice examples or to find out more about what can you achieve with this tools check HTML5 Canvas Tutorials

I would like to hear your thoughts