Scrawl-canvas v8 - DOM test 011

Canvas controller 'fit' attribute; Cell positioning (mouse)

This canvas is resizable* - drag the bottom right corner to change its dimensions.

Canvas fit
Stack width

Test purpose


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.

Exposing the hidden canvases (cells), for development purposes only: