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