The Canvas element in HTML5
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 the below figure:
Now we draw graphics in the 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 the below figure: