Canvases

A canvas allows you to perform live drawing in a defined area of the page, using JavaScript as the programming language, you can draw pictures, text, and graphic objects such as rectangles and ovals. The main advantage to this method of putting graphics on a web page, is that it can be updated live, for example, you could draw a bar chart from data stored in a database, rather than create an image every time the data changed. Canvases are quite a complicated area of web design, and is only supported in a few web browsers.

A quick example

First, we need to put a canvas down on the page, so on a new page (you can use an existing page, but to keep this example simple, we will assume the page has nothing else on it).

First, place a Canvas on the page by choosing 'Canvas' from the 'New Element' toolbar menu.

We need to give the Canvas an id attribute by using the Inspector as shown below.

To draw to the new Canvas we need to create a Script object. The Script object can be created in the body of the page, and it's usually best to have the Script after the Canvas, you can make sure of this by using 'Bring to Front' on the Script Object to make sure it's the last thing on your page.

Double-Click the Script object to edit it, and paste in the code below and press the 'Update' button in the Code Editor to apply your changes.



<script language="javascript" ><!--



function draw() {

 var canvas = document.getElementById("mycanvas");

 var ctx = canvas.getContext("2d");



 ctx.fillStyle = "rgb(200,0,0)";

 ctx.fillRect (10, 10, 55, 50);



 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

 ctx.fillRect (30, 30, 55, 50);

}





draw();

--></script>

Switch to Preview mode to see your canvas.

Tada!