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.
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
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