The Canvas element in HTML5

Here, we will learn about canvas element in HTML5.

Introduction:  The canvas element is used to draw graphics using JavaScript. It is defined with the <canvas> tag. We write the following code

<!DOCTYPE HTML>
<HTML>
<body>
<canvas style="border:2px solid #900000 ;">
</canvas>
</body>
</html>

Then, we run this code. The output will look like below figure

canvas element in HTML5
Now we draw graphics in canvas area. For this, we use javascript and write the following code

<!DOCTYPE HTML>
<HTML>
<body>
<canvas id="can" style="border:2px solid #900000 ;">
</canvas>
<script type="text/javascript">
var c=document.getElementById("can");
var VAR1=c.getContext("2d");
VAR1.fillStyle="#9999CC ";
VAR1.fillRect(100,80,100,110);
</script>
</body>
</html>

We run this code. The output will look like below figure

canvas element in HTML5