Getting Started

References
- A good HTML5 Canvas tutorial
- A good Javascript reference.
The example for the day is here
The HTML5 Canvas
- This is a fairly basic graphic system.
- Supported by most modern browsers. (I use Google Chrome)
A canvas is created as part of a HTML document.
- Create a file called basicCanvas.html
- The basic outline of a html file is
- ```
<html>
<head>
   
</head>
<body>
   
</body>
</html>
```
- You can view this in your browser with the following url
  - file:///path/to/your/file.html
  - Find the path with pwd in the directory you are using
Creating a canvas
- The most simple way to create a canvas is with html.
- You can specify the size (width and height)
- You should give it an ID for later access.
- ```
<body>
   
   <canvas id="myCanvas" width=500 height=500 style="border:2px solid"></canvas>
```
- Notice the closing canvas tag: </canvas>
- style is optional, but nice for now at least.
- The width and height are set to be 500.
- We will change this in the future, but for now this will doe.
We need some javascript to draw on the canvas.
- We will look at javascript in more depth but for now
  - It is very VERY c like.
  - But it is loosey goosey with types.

Javascript can be included in a set of < script> tags.

Following the canvas creation code add:

<!-- Make a canvas. -->
<canvas id="myCanvas" width=500 height=500 style="border:2px solid"></canvas>

<!-- now add code to draw on the canvas. -->
<script>
   // script code goes here.
</script>

The first thing we need to do is get a reference to the canvas object.
- Add the following
- ```
// get a reference to the canvas and the drawing context
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
```
- var is a reserved word in javascript.
  - It is used to declare a global variable.
  - We will use some global variables in this class.
  - Just don't go nuts.
- The first variable name is canvas
  - Variable names in javascript, for the most part, follow the same rules and conventions as those in c/c++
  - Start with
    - letter, _, $
  - Contain
    - letter, number, _, $
  - I will avoid $ in my variable names.
- In general, I will tend to write very C/C++ like javascript.
This is not a bad thing.

document.getElementById('myCanvas');

document is a reference to the html document we are working with
getElementById is a method that returns one of the elements in the document.
'myCanvas' asks for the element with the ID myCanvas, the canvas we just created.

ctx will hold the Drawing Context

Drawing Contex

The HTML5 canvas is capable of behaving different ways.
It can be a simple 2d drawing platform ('2d')
Later it will be a 3d drawing platform ('3d')
- This is needed for WebGL
This is a reference to the object that contains the drawing methods we will use.

Draw a rectangle or two

Add the following to your code

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

ctx.fillRect(10, 10, 100, 50);
ctx.strokeRect(200, 200, 40, 50);

This calls the fillRect method of the context.
- This method draws a filled rectangle
- It starts at pixel location (10,10)
- The rectangle is 100 pixels wide
- The rectangle is 50 pixels high.
What does strokeRect do?
What supprises you about this picture?

fillRect and strokeRect are examples of primitives in this graphics system.

They are the basic shapes from which images are constructed.
Look at the shapes section of the canvas tutorial
- Rectangles
- Text
- Paths

Draw a line

ctx.strokeRect(200, 200, 40, 50);

// draw a line between these two rectangles.
ctx.beginPath();
ctx.moveTo(110, 60);
ctx.lineTo(200,200);
ctx.stroke();

Draw a couple of circles

ctx.stroke();

// draw a circle
ctx.beginPath();
ctx.arc(400,400, 50, 0, Math.PI*2);
ctx.fill();

// draw a second circle
ctx.beginPath();
ctx.arc(100,400, 50, 0, Math.PI*2);
ctx.stroke();

Math.PI is a javascript constant for π.
What is the difference between fill and stroke

Finally, some text

ctx.stroke();

// draw some text
ctx.strokeText("Graphics is fun!", 350, 50);
ctx.fillText("Javascript is fun!", 350, 65);