The canvas
element of HTML5 uses javascript to draw graphic images in our Web Page.
Now we look
a simple example of canvas:
<canvas
id="myfirstcanvas" width="100"
height="100"></canvas>
We can control every pixel of
canvas. It has several methods for drawing boxes,circles...
In this
example first we take a canvas (myfirstcanvas) and then we write the javascript
function.
<script type="text/javascript">
var x=document.getElementById("myfirstcanvas");
var m=x.getContext("2d");
m.fillStyle="#FF0000";
m.fillRect(0,0,120,55);
</script>
var x=document.getElementById("myfirstcanvas");
Here we use the id to find the canvas element.
and then we use the Context element and the other lines are
used to draw rectangle
Complete
Program:
<!DOCTYPE html>
<html>
<body>
<canvas id="myfirstcanvas" width="100"
height="100" style="border:1px solid #000000;">
This browser is not OK... please use another
</canvas>
<script type="text/javascript">
var x=document.getElementById("myfirstcanvas");
var m=x.getContext("2d");
m.fillStyle="#0000FF";
m.fillRect(0,0,120,55);
</script>
</body>
</html>