The HTML Canvas

Please note, this does not work in ht IE on my windows machine, use firefox or chrome, or a newer IE.
The HTML5 canvas tag is an example of a simple 2D graphics system.
My references
- The Canvas Reference
- The Canvas Tag page
Most simple systems provide
- A way to draw graphics primitives: lines, circles, rectangles, ...
  - These are specified in terms of properties of the primitive
  - IE rect(20,30,15,25) will draw a rectangle
    - with one corner at (20,30)
    - A width of 15
    - A height of 25
  - In addition there are normally ways to change the attributes of the items drawn.
  - IE fillStyle(color) will set the fill style for the next object to be drawn.
Just a little more then a picture.
- You need to declare a canvas item in your page.
  - You need to set width and hieght
  - It is nice to set a border as well.
  - ```
  <canvas height="200" width="300" id="myCanvas" style="border:1px solid #d3d3d3;"> 
  	
```
- Actions performed on a canvas need to be done in a script.
  - Scripts start <script> tags
  - We need to gain access to the proper canvas
    - This is done by querrying the document for the canvas element we want to draw in.
    - ```
     var cvs = document.getElementById("myCanvas"); 
```
- the above code declares a variable cvs
- It returns the element of the document called "myCanvas"
- Next we need to get the "context" we will be drawing in.
  - A context is the "environment"
  - Many graphics API's support different contexts.
  - the 2d context is what we are interested in.
  - There are also experimental contexts for WebGL
  - ```
  var ctx = cvs.getContext("2d"); 
```
  - We will use this context for all drawing activity.
  - Finally we need to do the actual drawing.
    - ```
    ctx.fillStyle="red";
    ctx.fillRect(20,30,15,25); 
```
- The first line sets the fill style to red.
- The second will draw a red rectangle.

The final code:

<!DOCTYPE html>
<html>
<head>
<title> A simple picture.  </title>
</head>
<body>

<canvas height="200" width="300" id="myCanvas" style="border:1px solid #d3d3d3;">
Error, you can not create a canvas in your browser.
</canvas>

<script>
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");

ctx.fillStyle="red";
ctx.fillRect(20,30,15,25);
</script>

</body>
</html>

And the live page is here
Do you notice something strange about the location of the square?