How to Draw Custom Shape in HTML5

In this article I have described about the way to draw a custom shape in HTML5 with the help of canvas element.
  • 3338

Custom shape in HTML5

  • We can create custom shape in html5 with the help of canvas element.
  • It can be achieve with the help of beginpath() and closepath() method.

lets take an example

<!doctype html>

 <html>

 <body>

 <canvas id="shape">

 </canvas>

 <script type="text/javascript">

     var can1 = document.getElementById("shape");

     var can2 = can1.getContext("2d");

     can2.fillStyle = "#00ff11";

     can2.strokeStyle = "red";

     can2.lineWidth = 4;

     can2.beginPath();

     can2.moveTo(20, 20);

     can2.lineTo(120, 60);

     can2.lineTo(160, 90);

     can2.lineTo(10, 120);

     can2.lineTo(20, 20);

     can2.fill();

     can2.stroke();

     can2.closePath();

 </script>

 </body>

 </html>

 

OUTPUT

 

 sahpe1.jpg

NOTE

If we want to show the shadow of the custom shape, its also achieve by canvas element.
For this purpose we have to use "shadowColor" property of canvas element and have to assign a value to it.

Hence we have to add following code in above program

can2.shadowOffsetX = 10;

can2.shadowOffsetY = 20;

can2.shadowBlur = 4;

can2.fillStyle = "#00ff11";

can2.shadowColor = "#ee1100";

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.