HTML5 Canvas (Group Project)

The canvas element is a new way to draw graphics in HTML5 using JavaScript. Most of today's browsers include HTML5 support, meaning it is widely available. You can create JavaScript commands in a "context" to draw graphics. The "context" is the work area which you use to implement your HTML5 canvas.

The canvas itself is a rectangular space which has different methods for drawing shapes such as rectangles, lines, circles, and displaying images.

Here is an example of the code which shows how to set up canvas in an HTML5 document.

<canvas id="myCanvas" width="300" height="150">
Fallback content, in case the browser does not support Canvas.
</canvas>

Here you can see that you can assign attributes such as width, height, and canvas ID. We can also use X and Y co-ordinates to place images / drawings on the canvas in certain locations.

Here is an example of the code which allows you to draw a red rectangle.

<script type="text/javascript">

var c = document.

getElementById("myCanvas");

var cxt = c.getContext("2d");

cxt.fillStyle = "#FF0000";

cxt.fillRect(0,0,150,75);

</script>