HTML canvas tag

By | March 15, 2020

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
pixelswidth Specifies the width of the canvas
pixelsheight 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:-

for job
learn coding
for result in India
Make website make money
Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *