HomeWeb DesignHTMLWhat is HTML Canvas?

What is HTML Canvas?

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>

- Advertisment -

Latest Articles