In this chapter, we will learn about Tag <canvas> of HTML and its use but it will be known in detail. This tag provides a bitmap surface to the HTML to make the HTML work.HTML<canvas> tag is used to create graphics on a web page.
Graphics are created on a web page using a scripting language such as JavaScript with the help of HTML <canvas> tag. The canvas element only works as a container. You need a scripting language to draw graphics.There are many methods to add text, path boxes, etc. to the canvas.
Browser Support:-
All modern browsers support HTML canvas element.
Canvas Attributes:-
| Value | Attribute | Description |
| pixels | width | Specifies the width of the canvas |
| pixels | height | Specifies the height of the canvas |
Create HTML canvas:-
<canvas id="myid" height="120" width="220" style="border:2px solid black;">
Your browser does not support the HTML5 canvas
</canvas>Output:-
HTML canvas element with javaScript:-
Let us see how the HTML canvas and javaScript work together as we have already said that the HTML canvas works only as a container for graphics.
<h1>HTML canvas element Example</h1>
<canvas id="myid" height="120" width="220" style="border:2px solid black;">
Your browser does not support the HTML5 canvas
</canvas>
<script>
var c = document.getElementById("myid");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,100);
</script>Output:-
<h1>HTML canvas element Example</h1>
<canvas id="myid" height="120" width="340" style="border:1px solid black;">
Your browser does not support the HTML5 canvas
</canvas>
<script>
var c = document.getElementById("myid");
var ctx = c.getContext("2d");
ctx.font = "35px Arial";
ctx.strokeText("Hello learnhtmlcoding",0,70);
</script>Output:-
<h1>HTML canvas element Example</h1>
<canvas id="myid" height="120" width="340" style="border:1px solid black;">
Your browser does not support the HTML5 canvas
</canvas>
<script>
var c = document.getElementById("myid");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(170,60,50,0,2*Math.PI);
ctx.stroke();
</script>
Output:-
