Canvas factory
Scrawl-canvas mediates between its system and <canvas> elements in the DOM using Canvas wrapper objects. The wrapper includes a handle to the visible element, but most work is done on a second <canvas> element - the base Cell - which is not part of the DOM, thus excluded from a browser’s Document interface (including events).
The Canvas factory is not used directly; the factory is not exported as part of the scrawl object during Scrawl-canvas initialization. Instead, wrappers can be created for DOM-based <canvas> elements using the following scrawl functions:
scrawl.getCanvas - locates a <canvas> element in the DOM and creates a wrapper for it.scrawl.addCanvas - generates a new <canvas> element, creates a wrapper for it, then adds it to the DOM.
During initialization Scrawl-canvas will search the DOM tree and automatically create Canvas wrappers for all the <canvas> elements it discovers. The first <canvas> element discovered becomes the current canvas; all entitys created without a specified group attribute will be assigned to that element’s wrapper’s base Cell’s Group object. We can change the current canvas by invoking the scrawl.setCurrentCanvas function.
A canvas wrapper can include more than one Cell object. It will always include a base Cell object; additional Cells can be treated as cell layers and/or normal artefacts contributing to the final display.
During their creation, Canvas wrappers will directly modify the DOM, adding <div> and <nav> elements to it. These new elements are used as holds where the Canvas will store data and text, mainly to expose <a> links and <p> blocks which expose scene details to assistive technologies (accessibility). These additional elements have zero dimensions and should not affect the layout or painting of the rest of the web page.
Canvas wrapper objects use the base, position, dom and anchor mixins. Thus Canvas wrappers are also artefact objects: if a <canvas> element is a direct child of a Stack wrapper’s element then it can be positioned, dimensioned and rotated like any other artefact.
By default, all Canvas wrappers will track mouse/touch movements across their <canvas> elements, supplying this data to constituent Cell objects and artefacts as-and-when-required.
Canvas wrappers are used by Scrawl-canvas to invoke the Display cycle cascade. As such, they include clear, compile, show and render functions to manage the Display cycle. These functions are asynchronous, returning Promises.
Canvas wrappers are excluded from the Scrawl-canvas packet system; they cannot be saved or cloned. Killing a Canvas wrapper will remove its <canvas> element from the DOM, alongside the additional elements added to the DOM during Canvas creation.