The first thing I noticed is that if I draw a rectangle to a canvas element,
the height and width of the rectangle does not take on literal display
dimensions. It appears to inherit some other aspect ratio. Is that an
inborn characteristic, or is it the result of how the canvas element is
displayed with css rule set?
I have a wrapper element for the canvas element that is given a
fixed width and positioned with margin:0 auto; and text-align:center
Then the canvas element is given absolute positioning.
In code I assign width and height to the canvas element.
The 'feature' appears when I assign different dimensions to the canvas
element and the same dimension to a rectangle drawn with context.fillRect().
Initially I am working in Firefox, but have also viewed it in Safari.
The second thing I noticed is the clearRect will only clear a fillRect and not
a strokeRect. I do not yet have a manual text that lists all the usable methods and properties,
so is there a method for creating a simple rectangle with both
a fill and a stroke that can be cleared?
I am trying to animate the rectangle by getting it move across the canvas element.
I have to call clearRect on each shift. (other wise it creates a stack
of rectangles). I cannot clear stroke rect, and so cannot use it in the animation