How to Draw Shapes with HTML5 Canvas

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

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 id="cnv" width="200" height="100">

</canvas>

<script type="text/javascript">

    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 id="Canvas" width="200" height="100">

</canvas>

 <script type="text/javascript">

 

    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

 

canvas line.jpg

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

© 2019 DotNetHeaven. All rights reserved.