Scrawl-canvas v8 - DOM test 011

Test purpose

• Check the various fit modes by which the base (hidden) canvas can be copied over to its display canvas
• Check the canvas responds to changes in its container stack's dimensions
• Check that the darker blue 'cell' canvas correctly tracks the mouse cursor when it hovers over the stack element, with no errors in positioning whatever the setting of the canvas object's 'fit' attribute

*Note

We cannot directly resize the DOM canvas element using typical HTML functionality (for instance the ability to resize a textarea input in a form by dragging its bottom right corner) - the canvas element's bitmap and CSS dimensions are different attributes which do not play nicely together. Thus browsers will ignore any attempt to attach a draggable resize widget to the canvas element (using the CSS 'resize' property).

To overcome this issue we enclose the canvas element in a Scrawl-canvas stack element, add the resize property to that, and set the canvas dimensions to 100% of the Stack's dimensions. Even so, only Firefox seems to allow the canvas element to be resized dynamically using this fix; Chrome, for instance, shows the corner resize dragger as expected, but doesn't respond to user interaction.