Canvas

In notebook:
FrontEndMasters Real-Time Web with Node.js
Created at:
2015-10-12
Updated:
2015-10-12
Tags:
JavaScript DOM
Video Course on Real-Time HTML5 with Node.jsWhat does the h5ive facade help with:

make the CSS dimensions match the attribute dimension​
​​the addressable coordinate system vs. the visible coordinate system
​​if they are not the same, the canvas will be blurred 
  var cnv = h5.canvas({
    width: 500,
    height: 500,
    matchDimension: true // make the CSS dimensions match the attribute dimension 
});
add chainability to the canvas API
cnv.clear().setStyles({//stroke, fill, alpha});​
startPath​
​​corrects a quirk that some browsers if you don't give an inital starting point start the very first point of a drawing at 0,0 (firefox and safari are different)
rotating
you would think that canvas would rotate your drawing but in fact you are rotating the coordinate system. this is why your drawing always rotates the other direction