Scrawl-canvas v8 - Demo tests index (to 2 Sept 2019)

For summer of 2019 I decided to recode my HTML5 <canvas> element library - Scrawl-canvas - from scratch, bringing it up-to-date with current JavaScript standards such as modules, promises, web workers and the like. It also gave me an opportunity to redesign the library's internal structures and clean up what was becoming quite a messy code base.

I've included the roadmap for this work at the bottom of this page. As can be seen, I have not yet completed the work (the new version 8 remains in alpha) but I've done enough to feel happy about showing the world my progress to date.

The links below are to my working demos - I use demos as my testing environment, rather than use more traditional testing tools, because Scrawl-canvas is primarily an animation library. Note that v8α drops support for Internet Explorer and original versions of Edge; testing in other browsers outside of Chrome (on MacOSX) has been minimal to date.

I would really welcome feedback on this work - the best place to raise issues and suggestions will probably be on GitHub where the latest code resides in the v8-alpha branch.

Canvas-focussed tests

Canvas 001 - Block and Wheel entitys (make, clone, method); drag and drop block and wheel entitys
Canvas 002 - Block and wheel entity positioning (start, pivot, mimic, mouse)
Canvas 003 - Linear gradients
Canvas 004 - Radial gradients
Canvas 005 - Cell-locked, and Entity-locked, gradients; animating gradients by delta, and by tween
Canvas 006 - Canvas tween stress test
Canvas 007 - Apply filters at the entity, group and cell level
Canvas 008 - Picture entity position; manipulate copy attributes
Canvas 009 - Pattern styles; Entity web link anchors; Dynamic accessibility
Canvas 010 - Use video sources and media streams for Picture entitys
Canvas 011 - Shape entity (make, clone, method); drag and drop shape entitys
Canvas 012 - Shape entity position; shape entity as a path for other artefacts to follow
Canvas 013 - Defined Shape entitys: oval, rectangle, line, quadratic, bezier, tetragon, polygon, star, spiral
Canvas 014 - Line, quadratic and bezier Shapes - control lock alternatives
Canvas 015 - Phrase entity (make, clone, method, multiline)
Canvas 016 - Phrase entity position and font attributes; Block mimic functionality
Canvas 017 - Phrase entity - test lineHeight, letterSpacing and justify attributes; setGlyphStyles() functionality
Canvas 018 - Phrase entity - text along a path
Canvas 019 - Artefact collision detection
Canvas 020 - Testing createImageFromXXX functionality
Canvas 021 - Import and use spritesheets

DOM-focussed tests

DOM 001 - Loading the scrawl-canvas library using a script tag in the HTML code
DOM 002 - Element mouse, pivot and mimic functionality
DOM 003 - Dynamically create and clone Element artefacts; drag and drop elements (including SVG elements) around a Stack
DOM 004 - Limitless rockets (clone and destroy elements, tweens, tickers)
DOM 005 - DOM tween stress test
DOM 006 - Tween actions on a DOM element; tracking tween and ticker activity (analytics)
DOM 007 - Animate a DOM element using the delta attribute object; dynamically change classes on a DOM element
DOM 008 - 3d animated cube
DOM 009 - Stop and restart the main animation loop; add and remove event listener; retrieve all artefacts at a given coordinate
DOM 010 - Add and remove (demolish) Scrawl-canvas stack elements programmatically
DOM 011 - Canvas controller 'fit' attribute; Cell positioning (mouse)
DOM 012 - Add and remove (demolish) Scrawl-canvas canvas elements programmatically
DOM-013 - Artefact collision detection - DOM artefacts

ROADMAP - Summer 2019

... beyond fixing all the TODO statements in the code ...

  1. Port code over to new git branch; update, restructure and refactor code (MOSTLY DONE)
  2. Tabbing through portions of the canvas display (DONE)
  3. Analytics (DONE)
  4. Canvas text manipulation (NOT DOING) and accessibility (DONE)
  5. Review processes for dismantling/deleting everything (ONGOING)
  6. Canvas dynamic generation (adding to page and/or stack), canvas cloning (DONE)
  7. Generate Images and/or Picture entitys from other entitys, groups, cells, etc (INITIAL [MVP] WORK DONE)
  8. Touch functionality (INITIAL [MVP] WORK DONE)
  9. Animated sprites; loading spritesheets; spritesheet manifests (DONE)
  10. Save/Restore functionality (TODO)
  11. I want to add in some simple-to-use zoom and (parallax) scrolling capability (TODO)
  12. Develop Frame, Loom and Net artefacts (TODO)
  13. Think about developing a Grid artefact (TODO)
  14. Physics engine (ON HOLD - MAY DEPRECATE)
  15. Displacement map filter-like functionality (TODO)
  16. SVG as an asset (NOT TAKING FORWARD)