Scrawl-canvas v8 - Canvas test 009

Test purpose

• Create/clone various Pattern styles, using DOM images, and loading images
• Create/clone Block entitys to use the Patterns
• Create a new cell and add it to the canvas
• Animate a pattern-filled block in the new cell
• Use the new cell as the source for a Pattern style

To be aware: for reasons unknown, Chrome browsers struggle to apply shadows to entitys that use patterns for their fill and/or stroke, which can lead to a serious decrease in frame rate.

Additionally, using this demo to check zoned canvas User Interactions

• Define onEnter and onLeave functions on the first defined block, to change its linewidth attribute when the mouse cursor hovers over it
• Define anchor objects for each entity, and functionality to action mouse clicks on them
• Check that the 'on...' functions, and the anchor, successfully clone-and-adapt to the other block entitys
• Check that the functionality works by moving the cursor over and away from the blocks
• Check that clicking on an entity results in an appropriate Wikipedia page opening in a new browser tab
• Check that the functionality works using keyboard tabbing and enter (for accessibility)
• Check that the canvas's title (used in its tool prompt) adapts appropriately as user moves between Blocks

Tracking User Interactions

• Add Google Analytics (analytics_debug.js) to the page; create a 'ga' object and tracker
• Adapt the 'on...' functions to trigger tailored analytics messages as user focuses and blurs across the Block entitys
• Adapt the anchor so that it, too, sends a tailored analytics message when the link is invoked
• Check that the tracking functionality works as expected, both for mouse/touch interactions and for keyboard interactions

Handle a right-click contextmenu user interaction on a block

• MVP of a method for dealing with the right-click functionality that happens on normal <a> link elements in a web page
• Right-click on a block entity
• A new <a> link element should appear over the block, centred on the mouse pointer
• Right-click on the new element - a link-related context menu should appear
• The new element should disappear after 5 seconds. If the context menu is visible, it should remain visible and interactive; it should disappear after the user interacts with it, or clicks on the page surrounding it
• Right-clicking on the canvas element outside of the block entitys should display the normal image-related context menu
• Note that the new element has position: fixed styling - it will not move when the user scrolls through the web page
• Note that this MVP solution does not listen for keyboard context menu key presses

Kill and resurrect

• Kill and resurrect a Block entity to make sure it removes itself entirely from the Scrawl-canvas system, and cleanly recreate itself from saved packet, and that full functionality - including analytics tracking - can be re-applied to it
• Kill and resurrect a Pattern style to make sure it removes itself entirely from the Scrawl-canvas system, and cleanly recreate itself from saved packet

To note: There is a curious interplay in Chrome browsers between assets, shadows and the <canvas> element's context engine's "willReadFrequently" attribute. Very occasionally this interplay will combine to kill the performance of a canvas - as happens in this demo:

• Shadows: enabled; willReadFrequently: true - performance: < 2fps
• Shadows: disabled; willReadFrequently: true - performance: > 60fps
• Shadows: enabled; willReadFrequently: false - performance: > 60fps
• Shadows: disabled; willReadFrequently: false - performance: > 60fps

By default, SC sets "willReadFrequently" to true for all canvas context engines. For <canvas> elements demonstrating bad performance (in Chrome) this can be disabled by including data-will-read-frequently="false" in the element's markup. If setting this attribute on a canvas, additional testing will be required in non-Chrome browsers to make sure performance is not degraded in those environments.

Touch test: should work as expected - but dragging a finger from one block to another may lead to web page navigation being blocked by browser

Annotated code