What is HTML Canvas
In HTML, we can draw graphics on a web page using <canvas> element. you can also draw paths, boxes, circles, text, and adding images. <canvas> element four elements like:
- a red rectangle,
- a gradient rectangle,
- a multicolor rectangle,
- a multicolor text.
HTML Canvas Syntax:
<canvas id=”mydraw” width=”300″ height=”150″></canvas>
Width and Height – define the size of the canvas
Note: By default, a canvas does not have border and content. you can add more style to a canvas element. as shown in example below
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="mydraw" width="300" height="150" style="border:1px solid #ff0000;">
</canvas>
</body>
</html>How to Draw a Line in HTML using JavaScript
example:
<!DOCTYPE html>
<html>
<body>
<canvas id="mydraw" width="300" height="150" style="border:1px solid #ff0000;">
</canvas>
<script>
var canvs = document.getElementById("mydraw");
var cnvs = canvs.getContext("2d");
cnvs.moveTo(0,0);
cnvs.lineTo(300,150);
cnvs.stroke();
</script>
</body>
</html>How to Draw a Circle using JavaScript
example:
<!DOCTYPE html>
<html>
<body>
<canvas id="drawid" width="200" height="100" style="border:2px solid #ff0000;">
</canvas>
<script>
var prepare = document.getElementById("drawid");
var prepareexams = prepare.getContext("2d");
prepareexams.beginPath();
prepareexams.arc(95,50,40,0,2*Math.PI);
prepareexams.stroke();
</script>
</body>
</html>