# Scrawl-canvas — Demo tests
(For version 8.10.4)

The Scrawl-canvas library has been developed to make it easier to create and use <canvas> presentations and scenes in a web page. Canvases discovered on a page, or added to it, will be enhanced by the library to help make them more responsive and accessible, and easy to interact with.

These demos represent the library's testing suite. They have been designed to cover as much functionality as possible in sets of integration tests. Testing is (currently) conducted by hand: all demos must run as expected before changes can be pushed to the library's v8 or master branches on GitHub.

Additional (non-testing) demos can be found in this CodePen collection.

## Core functionality tests:

Scrawl-canvas helps developers build graphical representations and scenes that are real-time responsive to their DOM environment, and easier to make accessible to non-visibility-based technology. The coding paradigm encourages developers to split their code into ES6 modules: this makes code easier to maintain and easier to reuse.

In essence, Scrawl-canvas represents a system to define a set of graphical entitys and their associated styles (colors, gradients, patterns) and assets (images, spritesheets, video, media stream, noise, other canvas elements), then position (absolutely, relatively, by reference to other entitys) and animate them (by delta, by tween) across the canvas - often in response to user interaction. Animation can also be extended to styles and asset display.

Entitys include:

- Basic shapes such as rectangles (Block), circles (Wheel, Crescent) and text (Phrase).

- Wheel entitys also include part-circle shapes such as pie slices and truncated circles.
- Phrase text can be automatically broken over multiple lines, and different styling applied to words and individual letters; text can be animated along (curved) paths.
- CSS font strings are supported as far as possible, including font-sizes declared using suffixes such as 'em', 'rem', 'vw', 'pt', etc.

- Path-defined entitys (Shape), and a range of pre-defined, path-based entitys (Bezier, Cog, Line, LineSpiral, Oval, Polygon, Polyline, Quadratic, Rectangle, Spiral, Star, Tetragon).

- Line, Quadratic, and Bezier entitys can have their start, end and control coordinates positioned absolutely, relatively, or by reference to other entitys (including along paths).

- Images, video and related pixel-based image streams (Picture), both in whole and in part; the proportion of the image displayed can be controlled and animated.
- Compound entitys built on top of other entitys which can be used to combine the output of images in various ways (Grid) or distort image output (Loom, Mesh).

Entitys can be stamped onto the canvas in a variety of ways:

- They can be scaled, rotated and flipped as required.
- They can take Color, Gradient, RadialGradient, and ConicGradient styles for both their fill and stroke styling.

- All gradient styles can be bound to their containing cell, or to particular entitys.
- Entitys can accept all legitimate CSS color strings – rgb-key, rgb-hex, rgb(), rgba(), hsl(), hsla(), hwb(), lch(), lab(), oklch(), oklab() – for their fillStyle, strokeStyle and shadowColor input.
- Color factories (and thus gradient styles) can work with RGB, HSL, HWB, LAB, LCH, OKLAB and OKLCH color spaces internally, and export CSS color strings for each of those spaces; Color factories support color ranges. This extends to gradients, which can spread colors defined in any supported color space.
- Color factories, and gradient styles, can have easing algorithms applied to them – non-linear gradients.

- They can also take Pattern styles which may contain a variety of image-based assets; patterns can be scaled, skewed and positioned as required.
- Entitys can also act as clipping zones for subsequent drawing activities.
- The visual assets used by Picture entitys and Pattern styles can include fully responsive <img> elements (with a srcset attribute), or image files.
- <video> and <canvas> element assets are also supported, as are spritesheet animations.
- Scrawl-canvas includes a NoiseAsset asset (for Perlin, Simplex, Worley, etc, noise generation), alongside an RdAsset reaction-diffusion asset (for more organic patterns).
- Third-party image/video asset generators (for example MediaPipe, TensorFlow, Lottie) can be accommodated using the RawAsset asset.

Scrawl-canvas treats additional canvas Cells (layers) in the same way as it treats entitys:

- Cells can be positioned like entitys (absolutely, relatively, by reference); they can be scaled, rotated and flipped; they can be animated — including along paths.
- Like the base canvas, Cells can track mouse/touch interactions and movements, which allows users to interact with entitys displayed on the Cell.

Canvas 001 Block and Wheel entitys (make, clone, method); drag and drop block and wheel entitys
Drag zones
Canvas 002 Block and wheel entity positioning (start, pivot, mimic, mouse)
Canvas 003 Linear gradients
Canvas 004 Radial gradients
Responsive canvas
Canvas 005 Cell-locked, and Entity-locked, gradients; animating gradients by delta, and by tween; trigger canvas hover and drag UX
Drag zones
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
Drag zones
Canvas 012 Shape entity position; shape entity as a path for other artefacts to follow
Canvas 013 Path-defined entitys: Oval, Rectangle, Line, Quadratic, Bezier, Tetragon, Polygon, Star, Spiral, Cog
Canvas 014 Line, Quadratic and Bezier entitys - control lock alternatives
Drag zones
Canvas 015 Phrase entity (make, clone, method, multiline)
Drag zones
Canvas 015a Phrase entity - cache output to improve render speeds
Drag zones
Canvas 016 Phrase entity position and font attributes; Block mimic functionality
Canvas 017 Phrase entity - test lineHeight, letterSpacing and justify attributes; Section classes functionality
Canvas 018 Phrase entity - text along a path
Canvas 019 Gradient and Color factories - transparency
Canvas 019a Gradient and Color factories - transparency - alternative approach using Cells instead of images
Canvas 020 Testing createImageFromXXX functionality
Canvas 021 Import and use spritesheets
Canvas 022 Grid entity - basic functionality (color, gradients)
Canvas 023 Grid entity - using picture-based assets (image, video, sprite)
Canvas 024 Loom entity functionality
Drag zones
Canvas 025 Various responsive and non-responsive canvases; responsive images
Responsive canvas
Canvas 026 Tower of Hanoi
Drag zones
Canvas 027 Video control and manipulation; chroma-based hit zone
Responsive canvas
Canvas 028 Image magnifier; test some composite operations
Responsive canvas
Canvas 029 Phrase entitys and gradients
Canvas 030 Polyline entity functionality
Drag zones
Canvas 031 Cell generation and processing order - kaleidoscope clock
Responsive canvas
Canvas 032 Freehand drawing
Responsive canvas
Canvas 033 User preferences: prefers-color-scheme; prefers-reduced-motion; Javascript disabled
Responsive canvas
Canvas 034 Determine the displayed shape of the visible canvas; react to changes in the displayed shape
Responsive canvas
Canvas 035 Pattern style functionality
Drag zones
Canvas 036 Cell artefact-like positional functionality
Responsive canvas
Drag zones
Canvas 037 Pan and zoom using a Picture entity
Canvas 038 Responsive Shape-based entitys
Responsive canvas
Canvas 039 Detecting mouse/pointer cursor movements across a non-base Cell
Drag zones
Canvas 040 Trace out a Shape path over time
Canvas 041 Access and use a canvas context engine using the makeAnimation factory; setIgnorePixelRatio
Canvas 042 Canvas entity clip regions
Canvas 043 Test various clipping strategies
Drag zones
Library purge
Canvas 044 Building more complex patterns
Drag zones
Canvas 045 Use clipping entitys as pivots; clipping entitys and cascade events
Canvas 046 Kill cycles for Cell, Group, Tween/Ticker, Picture and Asset objects, and Picture source elements in the DOM
Library purge
Canvas 047 Easing functions for Color and Tween factories
Canvas 048 Display a filtered media stream
Responsive canvas
Canvas 049 Conic gradients
Canvas 050 Manipulate artefact delta animation values
Canvas 051 Line Spirals
Canvas 052 Create and use a RawAsset object to modify an image asset
Responsive canvas
Canvas 053 Display output from a Reaction-Diffusion asset
Responsive canvas
Canvas 054 Animated contour lines: map a complex gradient to NoiseAsset output
Responsive canvas
Canvas 055 Crescent entity functionality
Canvas 056 Seeded random number generator; point on path
Drag zones
Canvas 058 Image smoothing
Canvas 059 CSS color space strings - rgb-key, rgb-hex, rgb(), rgba(), hsl(), hsla(), hwb(), lch(), lab(), oklab(), oklch()
Canvas 060 Noise asset functionality
Responsive canvas
Canvas 061 Gradients stress test
Canvas 062 Group and ungroup entitys; create a bespoke drag-drop UX
Canvas 063 Semi-accessible Minimap; multiple drag zones
Responsive canvas
Drag zones
Canvas 064 Animation object: gradient along a line
Responsive canvas
Drag zones

## Filters functionality tests

The Scrawl-canvas filters functionality is inspired by SVG filters. Filter operations can be ordered in ways to combine different sets of operations to achieve complex effects. The library comes with an extensive set of pre-built filters, including:

- color and alpha channel manipulations;
- matrix, pixellate, blur;
- compositing and blending operations;
- palette reduction and dithering;
- image and noise asset upload (for use with composites and blends); and
- gradient, and displacement, mapping.

Filters can be applied to individual entitys, to Groups of entitys, and also to Cell displays.

Filters can be animated using Scrawl-canvas tween functionality.

Filters 001 Parameters for: Blur, Gaussianblur filters; filter memoization
Filters 002 Parameters for: red, green, blue, cyan, magenta, yellow, notred, notgreen, notblue, grayscale, sepia, invert filters
Filters 002a Cache output to improve render speeds
Filters 003 Parameters for: brightness, saturation filters
Filters 004 Parameters for: threshold filter
Filters 005 Parameters for: channelstep filter
Filters 006 Parameters for: channelLevels filter
Filters 007 Parameters for: channels filter
Filters 008 Parameters for: tint filter
Filters 009 Parameters for: pixelate filter
Filters 010 Parameters for: chroma filter
Filters 011 Parameters for: chromakey filter
Filters 012 Parameters for: matrix, matrix5 filters
Filters 013 Parameters for: flood filter
Filters 014 Parameters for: areaAlpha filter
Filters 015 Parameters for: tiles filter
Filters 016 Parameters for: newsprint filter
Filters 017 Parameters for: displace filter
Filters 018 Parameters for: emboss filter
Filters 019 Parameters for: edgeDetect, sharpen filters
Filters 020 Parameters for: clampChannels filter
Filters 021 Parameters for: corrode filter
Filters 022 Parameters for: mapToGradient filter
Filters 023 Parameters for: randomNoise filter
Filters 024 Parameters for: curveWeights filter
Drag zones
Filters 025 Parameters for: glitch filter
Filters 026 Parameters for: swirl filter
Filters 027 Parameters for: reducePalette filter
Filters 028 Stencil (background) filter functionality

## Compound filter tests

Filters 101 Using assets in the filter stream; filter compositing
Filters 102 Filter blend operation
Filters 103 A gallery of compound filter effects
Filters 104 Use a white-transparent gradient as a filter input
Filters 105 Use entitys to generate points for the tiles filter

## CSS/SVG filter String functionality tests

In addition to Scrawl-canvas's extensive filters functionality, the library also supports the CSS filter property. Be aware that CSS and SVG based filters are not currently supported by all browsers (specifically: Safari).

Filters 501 Canvas engine filter strings (based on CSS filters)
Filters 502 SVG-based filter example: gaussian blur
Filters 503 SVG-based filter example: posterize
Filters 504 SVG-based filter example: duotone
Filters 505 SVG-based filter example: noise

## Particles and physics tests

Scrawl-canvas includes a particle-based physics engine. Particle systems (Emitter, Net, Tracer) are treated as entitys and can be positioned and rotated like any other entity.

Particles 001 Emitter entity, and Particle World, basic functionality
Particles 002 Emitter using artefacts
Particles 003 Position Emitter entity: start; pivot; mimic; path; mouse; drag-and-drop
Drag zones
Particles 004 Emit particles along the length of a path
Drag zones
Particles 005 Emit particles from inside an artefact's area
Drag zones
Particles 006 Fixed number of particles in a field; preAction and postAction functionality
Particles 007 Particle Force objects: generation and functionality
Particles 008 Net entity: generation and basic functionality, including Spring objects
Particles 009 Net particles: drag-and-drop functionality
Drag zones
Particles 010 Net entity: using a shape path as a net template
Drag zones
Particles 011 Tracer entity: generation and functionality
Drag zones
Particles 012 Use Net entity particles as reference coordinates for other artefacts
Drag zones
Particles 013 Seasons greetings
Particles 014 Emitter functionality: generate from existing particles
Particles 015 Emitter functionality: generate from existing particle histories
Particles 016 Mesh entitys
Drag zones

## DOM and Stack tests

Scrawl-canvas <canvas> elements do not live in splendid isolation; the library is aware of each canvas's wider environment:

- Scrawl-canvas treats accessibility as a First Class Issue:

- All canvases have appropriate ARIA tags added to them — including ARIA labels and descriptions.
- Graphical text is automatically exposed to the DOM, to make it readable to assistive technology
- Graphical navigation is automatically reflected into the DOM via <a> anchor elements which can be triggered using the keyboard. This extends to responding visually to keyboard-driven focus/blur events.
- Canvases can adapt to user preferences, for instance prefers-reduced-motion and prefers-color-scheme.

- Scrawl-canvas treats responsiveness as a First Class Requirement:

- Scrawl-canvas <canvas> elements are aware of their size and shape, and include functionality to adapt to changes in their dimensions (approximating CSS container queries functionality). Canvases can be used safely within CSS grids.
- Canvases also emulate responsive behaviours associated with the CSS object-fit and background-size properties.
- Scrawl-canvas handles changes to asset files in real time — both for changes to the <img src=""> attribute, and browser-controlled actions related to <img srcset=""> when the user changes the browser's viewport size.
- Scrawl-canvas does everything it can to support CSS font and text attributes; this includes support for @font-face fonts loaded from the cloud.

- New <canvas> elements can be added to the web page in real time, and removed when required; Scrawl-canvas includes functionality to help component-based Javascript frameworks (eg: React, Svelte) use canvases more efficiently and safely.
- Functionality is included to easily add and/or remove event listeners to canvas elements, and also other elements which can be used to control the canvas display — for instance to help make the canvas scene/animation more accessible to assistive technology and keyboard users.
- Scrawl-canvas <canvas> elements can be made to respond to touch events; canvases can be made to remain static while dragging entitys, but follow browser-based touch actions (such as page scrolling) at other times.
- The Scrawl-canvas animation loop can also be stopped and restarted as required. In addition, <canvas> elements will only run their animations when they are visible in the browser viewport (via intersection observers) — canvases automatically track their position in, and movement through, the viewport.

Scrawl-canvas stacks extend the library's unique positioning, manipulation and animation functionality to DOM elements. This allows us to combine stacks and canvases so that DOM elements can be used to position canvas entitys, and give us the power to animate DOM elements along path-based entitys. It also gives users the power to interact with <canvas> elements rotated in 3D space.

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
Drag zones
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 (kill) Scrawl-canvas stack elements programmatically
DOM 011 Canvas controller 'fit' attribute; Cell positioning (mouse)
Responsive canvas
DOM 012 Add and remove (kill) Scrawl-canvas canvas elements programmatically
DOM 013 Track mouse movements over a 3d rotated and scaled canvas element
Responsive canvas
DOM 014 Scrawl-canvas initialization: canvas interference check
Responsive canvas
DOM-015 Use stacked DOM artefact corners as pivot points
Responsive canvas
Drag zones
DOM-016 Determine the displayed shape of the visible stack; react to changes in the displayed shape
DOM-017 Testing getCanvas(), getStack() functionality
DOM-018 Fullscreen API functionality

## Packet code tests

Many Scrawl-canvas objects can be saved to JSON strings known as packets, and restored from them. Scrawl-canvas clone functionality is built on top of its packet functionality; every demo that invokes a clone call on a Scrawl-canvas artefact or object is also testing that artefact/object's packet functionality. Similarly, many demos test object kill functionality, using packets to restore the objects after they have been killed.

Packets 001 Save and load Scrawl-canvas entity using text packets
Packets 002 Scrawl-canvas packets - save and load a range of different entitys

## Module code tests

Scrawl-canvas code is easy to use in ES6 modules.

Modular code, and the ability to kill and restore Scrawl-canvas objects, becomes important when using Scrawl-canvas in framework environments such as React or Svelte.

Modules 001 Scrawl-canvas modularized code - London crime charts (with accessible data)
Responsive canvas
Keyboard zones
Modules 002 Spiral charts
Modules 003 Factory functions to create more complex, compound entitys
Modules 004 Import and use Lottie animations
Modules 005 Accessible GUI-based simple canvas editor
Responsive canvas
Drag zones
Keyboard zones
Modules 006 Animation observer; Scrollytelling
Responsive canvas
Drag zones

## Snippet code tests

Scrawl-canvas snippets (warning: experimental!) are module-based functions which can be imported into any other code and applied to DOM elements. The functions add a canvas to the DOM element to act as its background, allowing complex displays and animations to be added to the element.

The results are similar to the Houdini CSS Paint API, though the path to achieving those results is different.

Snippet canvases are responsive: a well-written snippet will be able to adapt to changes in its host element's position, dimensions and styling attributes in real time, and should be able to tidy up after itself if its host element gets removed from the web page (for instance when it is part of a component).

The idea behind the snippets functionality is to allow third party developers to develop code Snippets which other developers can then import and apply in their own sites. Note that there are inherent dangers in this approach: it is always safer to host and review snippets code yourselves, to minimize the opportunities for third parties to inject malicious code into unsuspecting websites!

Snippets 001 Scrawl-canvas DOM element snippets
Responsive canvas
Snippets 002 Scrawl-canvas stack element snippets
Snippets 003 DOM element snippet - test canvas adaption to local element variations
Snippets 004 Snippets included in the Scrawl-canvas demo/snippets folder
Snippets 005 Create a responsive, interactive and accessible before/after slider infographic
Responsive canvas
Snippets 006 Editable header text colorizer and animation effect snippets
Responsive canvas

## Third party library experiments

Scrawl-canvas can work with third party Javascript libraries as well as vanilla Javascript code. The demos below use the following libraries and technologies:

- Delaunator - An incredibly fast and robust JavaScript library for Delaunay (and Voronoi) triangulation of 2D points
- MediaPipe - cross-platform, customizable machine learning solutions for live and streaming media
- Rapier - Fast 2D and 3D physics engine for the Rust programming language
- TensorFlow - an end-to-end open source platform for machine learning

In addition some of the other Demos, and CodePen examples, make use of third party libraries:

- Demos Canvas 009 and DOM 006 include examples of using Google Analytics with a canvas/stack animation.
- Demo Modules 004 dynamically imports the Adobe After Effects Bodymovin plugin, and uses it to play a Lottie animation.
- The CodePen cloth demo uses the Matter.js physics engine.

Delaunator 001 Delauney triangulation and Voronoi cell visualisation
Delaunator 002 Responsive Voronoi cells in a RawAsset wrapper
Responsive canvas
MediaPipe 001 MediaPipe Selfie Segmentation - model image output
MediaPipe 002 MediaPipe Face Mesh - model image output
MediaPipe 003 MediaPipe Face Mesh - working with the mesh coordinates
Rapier 001 Rapier physics engine - stacking boxes
TensorFlow 001 Tensorflow tfjs-models / body-pix experiment - follow my eyes
TensorFlow 002 Tensorflow tfjs-models / body-pix experiment - model image output