Draw Different Shapes Using Canvas Element in HTML

Introduction

In the last post about html5 canvas elements we only covered how to create a canvas element in HTML and then how to get it in JavaScript to draw some shape in it.
In the start, we only see a simple line using canvas properties. As we see we need to getcontext() either its 2d or 3d and then using this we create its object and call the beginpath() function so that it tell the browser it’s a new path for a shape.
moveTo() and LineTo() are used to define the start and end point of the line. Today in this post we learn more about HTML canvas elements.

In this tutorial, you will learn how to draw simple shapes like square, rectangle and circle by using canvas element in HTML5.

Circle using canvas:

To draw a circle in canvas, we need to use the arc() property. This property is used to draw an arc() but we draw this arc() in a way its look like a complete circle.

arc(x-axis, y-axis, radius, start_point, end_point);

X and Y axis define the location in the canvas of the circle and the radius as its name define the radius of the arc, and then the last two parameters are start and end point of the arc. As we need to draw a complete circle so, we have to draw an arc which starts from 0 and end at 2*Math.PI; to illustrate Math.PI. Learn more about Math object.

Code for circle:

1

2

3

4

5

6

<canvas id="drawspace"width="300"height="300"

style="border:2px solid red;">

You are using some old browser..!

</canvas>

1

2

3

4

5

6

7

8

9

<script>

varx=document.getElementById("drawspace");

vardraw=x.getContext("2d");

draw.beginPath();

draw.arc(150,150,100,0,2*Math.PI);

draw.stroke();

</script>

Rectangle using canvas:

As above we see how to create a circle using canvas same as we have filled() property in canvas using which we can also create a rectangle in canvas box.

fillRect(x, y, x1, y1);
In the above syntax, the first x represent the starting x-axis and y represent the starting y-axis and then the x1 and y1 represent the ending point or coordinates of x and y-axis of the rectangle.

Code for Rectangle:

1

2

3

4

5

6

<canvas id="drawspace"width="300"height="200"

style="border:2px solid red;">

You are using some old browser..!

</canvas>

1

2

3

4

5

6

7

8

9

<script>

varx=document.getElementById("drawspace");

vardraw=x.getContext("2d");

draw.beginPath();

draw.fillRect(20,50,250,100);

draw.stroke();

</script>

Square using canvas:

To draw a square using canvas simple use the same fillRect() property but this time you have to put the x1 and y1 same.

1

2

3

4

5

6

<canvas id="drawspace"width="300"height="200"

style="border:2px solid red;">

You are using some old browser..!

</canvas>

1

2

3

4

5

6

7

8

9

<script>

varx=document.getElementById("drawspace");

vardraw=x.getContext("2d");

draw.beginPath();

draw.fillRect(20,50,100,100);

draw.stroke();

</script>

Text using canvas:

Instead of shapes we also write text on canvas using html5 canvas properties for this we have the following functions.

Font

FillText()

StrokeText()

The font is the attribute we define the font size and font family of the text. The fillText contain three parameters first one is the text that you want to write and the then the x and y coordinates. strokeText is same as fillText, but the text was not fill in it. The below code define how to use Font and then fill text and stroke text separately.

Font = “20px Aharoni”;

Text using fillText():

You can draw filled text in canvas using fillText().

1

2

3

4

5

6

<canvas id="drawspace"width="400"height="100"

style="border:4px dotted red;">

You are using some old browser..!

</canvas>

1

2

3

4

5

6

7

8

9

<script>

varx=document.getElementById("drawspace");

vardraw=x.getContext("2d");

draw.beginPath();

draw.font="30px Aharoni";

draw.fillText("Programming Seekerz",25,50);

</script>

Text using strokeText():

You can display text which is not filled, using strokeText().

1

2

3

4

5

6

<canvas id="drawspace"width="400"height="100"

style="border:4px dotted red;">

You are using some old browser..!

</canvas>

1

2

3

4

5

6

7

8

9

<script>

varx=document.getElementById("drawspace");

vardraw=x.getContext("2d");

draw.beginPath();

draw.font="30px Aharoni";

draw.strokeText("Programming Seekerz",25,50);

</script>

Colorings and alignment:

You can also add some color to the text and adjust its alignment. To do this html5 canvas has its built-in properties.

fillStyle

textAlign

Fill style defines the color for filling the text and text-align define the alignment of the text.

1

2

3

4

5

6

<canvas id="drawspace"width="400"height="100"

style="border:4px dotted red;">

You are using some old browser..!

</canvas>

1

2

3

4

5

6

7

8

9

10

11

<script>

varx=document.getElementById("drawspace");

vardraw=x.getContext("2d");

draw.beginPath();

draw.fillStyle="red";

draw.textAlign="left";

draw.font="30px Aharoni";

draw.strokeText("Programming Seekerz",50,50);

</script>

Hope you like this tutorial. Stay tuned for more upcoming tutorials! Stay Blessed!
Don’t forget to give us feedback through comments.