PBA INSTITUTE

CANVAS

The <canvas> element in HTML is like a blank canvas where you can draw anything you want using JavaScript. It's super flexible and lets you create all sorts of graphics, animations, and interactive stuff directly on your webpage. You can draw shapes, lines, images, and even make things move in real-time. Whether you want to build cool charts, fun games, or stunning visuals, the <canvas> element has got you covered. It's like having a magic drawing board on your webpage that brings your ideas to life, making your website more dynamic and engaging for visitors.

Example :

Example-1

													
													
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <canvas id="myCanvas"></canvas>
  <script type="text/javascript">
  	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");
	ctx.fillStyle = "#FF0000";
	ctx.fillRect(0, 0, 80, 100);
	</script>
</body>
</html>
													
													
												

Output:

In this example,
i. '<canvas>' : This is the opening tag for the canvas element.
ii. id="myCanvas": This is an optional attribute that assigns an identifier to the canvas element, which can be used to reference it in JavaScript.
iii. document.getElementById("myCanvas") is used to get a reference to the canvas element, and getContext("2d") is used to obtain the 2D drawing context, which allows you to draw shapes, text, and images on the canvas.

Example-2

													
													
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
   <canvas id="myCanvas" width="100" height="100" style="border:1px solid #000;"></canvas>

    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
	</script>
</body>
</html>
													
													
												

Output :

In this example,
i. width="100" and height="100": These attributes specify the width and height of the canvas in pixels. You can set these values to define the initial size of your canvas.

Conclusion :

Basically, The <canvas> element in HTML offers a dynamic platform for creating graphics and interactive content. Its versatility enables developers to craft engaging visual experiences, from simple drawings to complex animations and games. With seamless integration into web pages and robust features, <canvas> empowers developers to innovate and captivate audiences. Its flexibility and ease of use make it an indispensable tool for building immersive web applications, pushing the boundaries of creativity and interactivity on the web.

CANVAS

Example :

Conclusion :

HTML All Topics

SHARE