HTML Canvas

The canvas element of HTML5 uses javascript to draw graphic images in our Web Page.

Now we look a simple example of 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.

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 a 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>