HTML Elements: <canvas>
<canvas> element only acts as a container for the graphics. The script you write does all the work in making the graphic.
Here is the basic syntax for the
Above you will see that the
height attributes are each set to
400. This is the width and height of the canvas in pixels. The id
getElementById() method. Here is an example script:
<script> var c = document.getElementById("example_canvas"); var our_context = c.getContext("2d"); our_context.fillStyle = "#d56"; our_context.fillRect(0,0,200,200); </script>
The canvas object has several methods for drawing paths, boxes, circles, characters, and adding images. You can access these methods using the id assigned to your
<canvas> element. By default, the canvas element does not have a border. And you are able to add as many
<canvas> elements to your HTML document as you would like.