The hypertext mark-up language canvas part provides hypertext mark-up language a bitmapped surface to figure with. it’s accustomed draw graphics on the net page.
The hypertext mark-up language canvas tag is employed to draw graphics victimization scripting language like JavaScript.
The canvas part is hardly a tool for graphics, you need} scripting language to draw graphics. Canvas Part 2d allows for dynamic and scriptable rendering of shapes and electronic image pictures.
It is an occasional level, procedural model that updates the electronic image and does not have an internal view. There are many strategies in the canvas for area unit methods, boxes, circles, drawing text and adding pictures.
How to create a hypertext mark-up language canvas?
The canvas associate hypertext markup may be a parallelogram on the language page. It’s with the canvas piece. Basically, the canvas part has no borders and no material, it is a kind of container.
The tagged internet page in the hypertext markup language is used to draw graphics on the victim JavaScript. He is accustomed to adding draw methods, boxes, texts, textures and pictures. By default, it does not include borders and text.
Normal HTML Canvas Tag Demo
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
HTML canvas Tag
</title>
</head>
<body>
<h1>This is HTML canvas Tag Example </h1>
<!-- canvas tag starts here -->
<canvas id = "demo" width = "300" height = "300"
style = "border:2px solid black">
</canvas>
<!-- canvas tag ends here -->
</body>
</html>Output:-
HTML canvas Tag Example With JavaScript
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
HTML canvas Tag
</title>
</head>
<body>
<h1>This is HTML canvas Tag Example With JavaScript</h1>
<!-- canvas tag starts here -->
<canvas id = "demo" width = "300" height = "300"
style = "border:2px solid black">
</canvas>
<!-- canvas tag ends here -->
<script>
var c=document.getElementById("demo");
var cx = c.getContext("2d");
var grd = cx.createRadialGradient(150,
150, 10, 150, 150, 150);
grd.addColorStop(0, "yellow");
grd.addColorStop(1, "blue");
cx.fillStyle = grd;
cx.fillRect(0, 0, 300, 300);
</script>
</body>
</html>Output:-
