How to Draw Shapes with HTML5 Canvas

Posted in HTML 5 | HTML 5 Canvas on July 12, 2019

In this article I have described the way to draw different shape with the help of Canvas element in HTML5.

Draw a circle through <canvas> element

As we know that Canvas element always use with JavaScript because canvas element has no drawing capability itself.
So we have to use JavaScript code for drawing the circle.

Lets take an example

<!DOCTYPE html>

<html>

<body>

</canvas>

var c = document.getElementById("cnv");

var crcl = c.getContext("2d");

crcl.fillStyle ="#HH0011";

crcl.beginPath();

crcl.arc(70, 25, 20, 0, Math.PI * 2, true);

crcl.closePath();

crcl.fill();

</script>

</body>

</html>

OUTPUT

canvas circle.jpg

Draw a Line through <canvas> element

<!DOCTYPE html>

<html>

<body>

</canvas>

var c = document.getElementById("Canvas");

var line = c.getContext("2d");

line.moveTo(60, 200);

line.lineTo(200, 0);

line.lineTo(50, 50);

line.stroke();

</script>

</body>

</html>

OUTPUT

You may also want to read these related articles :

Ask Your Question

Got a programming related question? You may want to post your question here

Programming Answers here