Mozilla.org Canvas Notes

Canvas Notes

* Canvas is default 300px by 150px
* alt content is contained within <canvas><a href=''>alt text</a></canvas>
alternatively:
```
var canvas = document.getElementById('tutorial');

if (canvas.getContext) {
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}
```

* Canvas enables 2D and 3D.
  * var ctx = canvas.getContext('2d'); //enable 2D drawing

* Gradients are formed by creating objects: createLinearGradient(x1,y1,x2,y2) or createRadialGradient(x1,y1,r1,x2,y2,r2) 
with colrors of formed by gradient.addColorStop(position, color) placing a color index at a number between 0.0 and 1.0

```
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  // Create gradients
  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
  lingrad.addColorStop(0, '#00ABEB');
  lingrad.addColorStop(0.5, '#fff');
  lingrad.addColorStop(0.5, '#26C000');
  lingrad.addColorStop(1, '#fff');

  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
  lingrad2.addColorStop(0.5, '#000');
  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');

  // assign gradients to fill and stroke styles
  ctx.fillStyle = lingrad;
  ctx.strokeStyle = lingrad2;
  
  // draw shapes
  ctx.fillRect(10, 10, 130, 130);
  ctx.strokeRect(50, 50, 50, 50);

}
```

* Paterns and loops of images created by ctx.createPattern(image,type) returning a pattern object.
  * Image is an HTMLImageELement, a canvas, or video element. Type is a string of how to use such as repeat, repeat-x, repeat-y or no-repeat.
```
var img = new Image();
img.src = 'someimage.png';
var ptrn = ctx.createPattern(img, 'repeat');
```

* Text Shadow is set before creating text
```
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;
  ctx.shadowBlur = 2;
  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
 
  ctx.font = '20px Times New Roman';
  ctx.fillStyle = 'Black';
  ctx.fillText('Sample String', 5, 30);
}
```
* making text solid:
```
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '48px serif';
  ctx.fillText('Hello world', 10, 50);
}
```
* making text outlined
```
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '48px serif';
  ctx.strokeText('Hello world', 10, 50);
}
```
* baselines can be set with  ctx.textBaseline to set where text hangs
  * top, hanging, middle, alphabetic, ideographic, bottom.

* Images can be drawn with 
  * HTMLImageElement -  new Image() [aka <img> tag] from document.images
  * SVGImageElement  - [aka <image>]
* crossorigin attribute may need to be set https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin

* cropping is done with : drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

* Image scaling properties/quality are controlled by
```
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
```

* Session canvas states save and load with save() and restore(). 
* Placed onto the stack for reuse which holds transformations, attribute styles, clipping.

Animation can be done with setINterval, setTimeout or window.requestAnimationFrame(callback_fun) which sends a response to a function every browser refresh rate.
Callback takes a DOMHighResTimeStamp for when te window starts setting callbacks.
ctx.getImageData(x, y, 1, 1) gets rgba data at a point on x and y

Canvas images can be saved with canvas.toDataURL(mimetype, quallity) to store as a bloburl