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