Demo Canvas 031

To note: Javascript is not running in this browser environment. Our apologies, but this demo has not yet been updated to support progressive enhancement.

Test purpose

Create new Cell wrappers in the Canvas wrapper
Add dedicated entity objects to each Cell's Group object
Build and display a clock face
Build and display a Kaleidoscope background
Update the order in which Cells compile their displays, and show their displays
Animate the scene so it displays the local time

Known issue: this demo is significantly slower on Chrome browsers, compared to Firefox/Safari. The underlying issue appears to be Chrome's functionality to copy drawImage data from a non-DOM cell over to the (equally non-DOM) base cell - 50ms+ per Display cycle. Performance improves if the base cell dimensions are made smaller (for example: 400px square); however, this issue feels similar to the issue encountered in Demo canvas-009.

Touch test: canvas should be resizable

Annotated code

Scrawl-canvas v8 - Canvas test 031

Cell generation and processing order - kaleidoscope clock

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

Test purpose