# Javascript Canvas
An HTML element which can be used to draw graphics using scripting.
## Setting Up
The html element is simple enough.
``` html
```
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
```
``` 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);
```