HTML Canvas

The HTML Canvas is one of the Amazing Features of the HTML Language. You can make an impressive website modal with help of HTML Canvas. You can draw graphics with Javascript using HTML Canvas. This feature is a part of HTML5. This allows us to make a 2D-like feature in an object on your website.

Now a day canvas is used by big companies like Apple, Microsoft, and many other tech giants.

In earlier days before the introduction of HTML Canvas. SVG (Scalable Vector Graphics) was used to draw 2d objects on websites. but that was not an efficient way to draw vector images. SVG was XML Based while HTML Canvas is a Bitmap-based vector graphics Format used with HTML and CSS.

It is supported by almost all browsers like Mozilla Firefox, Google Chrome, Internet Explorer, Opera, and Microsoft Edge. It is just like a container that is used with JavaScript.

You can draw some amazing 2D figures like circles, lines, ellipses, and rectangles.

Code in HTML and Js for drawing Rectangle

Here is the code to Draw A Rectangle on your website using HTML, CSS, and JavaScript (HTML Canvas)


<HTML>
<HEAD> 
<STYLE>
#ELEMENT{BORDER:5px solid yellow;}
</STYLE>
</HEAD>
<BODY>
<CANVAS id = "ELEMENT" width = "150" height = "150"></CANVAS>                
</BODY>
</HTML>

Code to Draw Circle in HTML Canvas

You can make Circle by Using HTML and CSS and can induce animations and transitions in it to make it more pretty to look.

Have a look at the code!

<html>
<head>
<style>
#element{border:5px solid Violet; border-radius:50px 50px;}
</style>
</head>
 <body>
<canvas id ="element"width="150"height="150"></canvas>
   </body>
</html>

We can Make other shapes by varying the border-Radius of the canvas element. In order to make a circle the height and width of your canvas element should be equal.

Make a Triangle Using HTML and CSS

You can draw any type of triangle as per your requirement by changing the border. Here is the code to make a Triangle(Equilateral) using HTML Canvas.

<html>
<head>
<style>
#triangle {
width: 0;
height: 0;
border-left:150px solid transparent;
border-right:150px solid transparent;
border-bottom:150px solid brown;
         }
</style>
</head>
<body>
<canvas id="triangle"></canvas>
</body>
</html>

Draw Trapezium Using HTML

Let's our code to draw a trapezium in Html Canvas. We can change the color and dimension of this trapezium by varying the height and weight of HTML canvas.

<html>
<head>
<style>
#trapezium {
height: 0;
border-left: 130px solid transparent;
border-right: 130px solid transparent;
border-bottom: 130px solid green;
}
</style>
</head>
<body>
<canvas id="trapezium"></canvas>
</body>
</html>