# Javascript Canvas

An HTML element which can be used to draw graphics using scripting.

<canvas id="canvas" width="500" height="70" style="border: 1px solid gray;"></canvas>
<script>
function init() {
    window.requestAnimationFrame(draw);
}
var speed = 3; // px per frame
var x = 10; // starting pos
var c = 0;
function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var canW = document.getElementById('canvas').scrollWidth;
    var canH = document.getElementById('canvas').scrollHeight;
    ctx.globalCompositeOperation = 'destination-over'; // draw our new stuff behind old stuff (so we dont jitter)
    ctx.clearRect(0, 0, canW, canH); // clear canvas

    c += .01;
    var color = parseInt(Math.abs(Math.sin(c)) * 255);
    ctx.fillStyle = 'rgb(' + color + ', 100, ' + color + ')';
    ctx.fillRect(x, 10, 50, 50);
    ctx.save();
    x += speed;

    var xMin = 10;
    var xMax = canW - 50 - 10;
    if (x > xMax) {
        speed = -3;
    } else if (x < xMin) {
        speed = 3;
    }

    window.requestAnimationFrame(draw); // recursive draw
}
init(draw);
</script>

## Setting Up

The html element is simple enough.

``` html
<canvas id="canvas" width="640" height="480"></canvas>
```

Then we can find our canvas element and create a 2D or 3D context for us to work with.

``` javascript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
```

## Common Methods

``` javascript
// Styling
ctx.fillStyle = 'rgb(200, 0, 0)'; // set the color of the fill command
ctx.strokeStyle = 'rgb(200, 0, 0)'; // set the stoke style

// Rectangles
ctx.fillRect(25, 25, 100, 100); // create a rectangle with the fill style
ctx.clearRect(45, 45, 60, 60);  // creates a transparent rectangle, erases
ctx.strokeRect(50, 50, 50, 50); // creates a rectangle with only a stroke outline

// Paths
ctx.beginPath();      // creates a new path
ctx.moveTo(75, 50);   // moves coordinates of what we are about to draw
ctx.lineTo(100, 75);  // creates a path line
ctx.lineTo(100, 25);
ctx.fill();           // fills in the path, (triangle example)

ctx.beginPath();      // similar example will stroke a triangl
ctx.moveTo(125, 125);
ctx.lineTo(125, 45);
ctx.lineTo(45, 125);
ctx.closePath();
ctx.stroke();

// Circles
arc(x, y, radius, startAngle, endAngle, anticlockwise); // arc at x,y from and to angle, finally direction (default clockwise)
arcTo(x1, y1, x2, y2, radius) // draws an arc connected with a line to previous point
```

## Basic Animation

These are the steps you need to take to draw a frame:

1. Clear the canvas
2. Save the canvas state
3. Draw animated shapes
4. Restore canvas state

We can set intervals for drawing with the following Javascript functions:

- setInterval(func, delay) - raw draw loop
- setTimeout(func, delay) - useful for listening to input commands
- requestAnimationFrame(callback) - runs at 60fps

Here is a basic structure of how we could run a draw loop with a bouncing rectangle

``` html
<canvas id="canvas" width="600" height="400" style="border: 1px solid gray;"></canvas>
```

``` javascript
function init() {
    window.requestAnimationFrame(draw);
}

var speed = 3; // px per frame
var x = 10; // starting pos
function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var canW = document.getElementById('canvas').scrollWidth;
    var canH = document.getElementById('canvas').scrollHeight;
    ctx.globalCompositeOperation = 'destination-over'; // draw our new stuff behind old stuff (so we dont jitter)
    ctx.clearRect(0, 0, canW, canH); // clear canvas

    ctx.fillStyle = 'rgba(10, 10, 10, 0.4)';
    ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';
    ctx.save();

    ctx.fillStyle = 'rgb(200, 0, 0)';
    ctx.fillRect(x, 10, 50, 50);
    x += speed;

    var xMin = 10;
    var xMax = canW - 50 - 10;
    if (x > xMax) {
        speed = -3;
    } else if (x < xMin) {
        speed = 3;
    }

    window.requestAnimationFrame(draw); // recursive draw
}

init(draw);
```