Many fresh coders thought is it possible to make appealing graphics on websites without uploading external images. Than, here is a good news. With HTML5 canvas you can now draw images within the browser. Now matter if you want to draw simple shapes, or complex animations, HTML5 canvas lets you to have control on graphics. In this blog post, I'll guide you through the basics of creating simple visuals using HTML5 canvas element.

 

Setting Up the Canvas Element

First you've to set up the canvas element in HTML doc before drawing visuals. The role of canvas element is giving you a container, in which you can draw shapes or visuals and you'll also need JavaScript to make anything visible.

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

Getting the Canvas Context

As you've setup html canvas in above code, now let's get the context. The content is the main character that lets us to draw visuals on canvas. There are different contexts available, but we'll use 2D context with the help of JavaScript, as the topic of this post is to draw simple 2D shapes.

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

Drawing Basic Shapes

Now you've accessed the context, means you can start drawing. Let's draw the following basic shapes:

Drawing a Rectangle

The easiest shape you can draw on HTML5 canvas is rectangle. The fillRect() method lets you to specify the size and position of rectangle you want to draw.

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

Drawing a Line

The second easiest shape, you can draw is line. The moveTo() and lineTo() methods lets you specify the starting and ending points of a line.

ctx.beginPath();
ctx.moveTo(50, 200);
ctx.lineTo(200, 200);
ctx.stroke();

Drawing a Circle

Our third simple shape is circle, for which we use the arc() method. This method specify the center coordinates, radius, and start/end angles:

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

Styling the Shapes

HTML canvas only lets us to draw simple shapes, but you can style and customise them with different line styles and colours. The fillStyle property changes the fill colour, while strokeStyle adjusts the line colour.

For colour changing:

ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 150, 100);

and for applying different line strokes:

ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.stroke();

Conclusion

HTML5 Canvas is easy and enjoyable to use! Drawing basic shapes and customising them to your project requires just a few lines of code. As you practice, you may use increasingly complicated visuals, animations, and interactions with Canvas. Try Canvas drawing now! There are a lot of options!