Scrawl-canvas — Demo tests
(For version 8.15.0)

The Scrawl-canvas library makes 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 branch 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-visual 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:

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

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

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
Anchor links
Analytics
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 CSS color space strings - rgb-key, rgb-hex, rgb(), rgba(), hsl(), hsla(), hwb(), lch(), lab(), oklab(), oklch()
Canvas 016 CSS color space strings - srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz-d50, xyz-d65, xyz
Canvas 017 Gradients stress test
Canvas 018 Gradient and Color factories - transparency
Canvas 019 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; filter-based hit zone
Responsive canvas
Anchor links
Canvas 028 Image magnifier; test some composite operations
Responsive canvas
Canvas 029 Image smoothing
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; test animation maxFrameRate
Canvas 051 Interactions between filters, GCO and GlobalAlpha applied to an entity
Canvas 052 Noise asset functionality
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 Wide Gamut 2D Graphics using HTML Canvas
Canvas 056 Seeded random number generator; point on path
Drag zones
Canvas 057 Create and use a RawAsset object to modify an image asset
Responsive canvas
Record video
Canvas 058 Group and ungroup entitys; create a bespoke drag-drop UX
Canvas 059 Semi-accessible Minimap; multiple drag zones
Responsive canvas
Drag zones
Canvas 060 Wheel entity attributes and functionality
Canvas 061 Crescent entity attributes and functionality
Canvas 062 Tetragon and Oval entity attributes and functionality
Canvas 063 Rectangle entity attributes and functionality
Canvas 064 Polygon entity attributes and functionality
Canvas 065 Star entity attributes and functionality
Canvas 066 Spiral entity attributes and functionality
Canvas 067 Cog entity attributes and functionality
Canvas 068 LineSpiral entity attributes and functionality
Canvas 069 Test Cell splitShift functionality (shift only)
Canvas 070 Test Cell splitShift functionality (infinite scroll)
Canvas 071 Using getCellData, paintCellData functionality
Canvas 072 Public transport furniture cover design

Label and EnhancedLabel entity tests

As of Scrawl-canvas v8.13.0, the Phrase entity has been deprecated and removed from the library. The new Label and EnhancedLabel entitys replace it. All demos that previously used Phrase entitys have been updated to use these new entitys.

Canvas 201 Label entity (make, clone, method); Label accessible text
Drag zones
Canvas 202 Label entity - basic support for non-western fonts
Canvas 203 Label entity - underline text
Canvas 204 Label entity - gradients and patterns
Drag zones
Canvas 205 Label entity - updating font parts; experiments with variable font
Drag zones
Canvas 206 EnhancedLabel entity - basic multiline text
Canvas 207 EnhancedLabel entity - styling multiline text
Canvas 208 EnhancedLabel entity - text along a path
Canvas 209 EnhancedLabel - clone entity, drag-drop; shadows, gradients and patterns
Drag zones
Canvas 210 EnhancedLabel - TextUnit dynamic manipulation
Canvas 211 EnhancedLabel entity - keyboard navigation; hit tests
Keyboard zones
Canvas 212 EnhancedLabel entity - updating font parts; experiments with variable font

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:

Filters can be applied to individual entitys, to Groups of entitys, and also to Cell displays. Entitys can be used to filter the display behind them - stencil filters.

Filters can be animated using Scrawl-canvas tween functionality.

Filters 001 Parameters for: red, green, blue, cyan, magenta, yellow, notred, notgreen, notblue, grayscale, sepia, invert filters
Filters 002 Filters - cache entity 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
Filters 029 Parameters for: rotateHue filter
Filters 030 Parameters for: negative filter
Filters 031 Parameters for: modifyOk filter
Filters 032 Parameters for: modulateOk filter
Filters 033 Parameters for: blur filter
Filters 034 Parameters for: gaussianblur filter
Filters 035 Parameters for: offset filter
Filters 036 Parameters for: offsetChannels filter
Filters 037 Test various channel-alpha filters

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
Particles 017 Dynamic update of particle colors
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 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)
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
DOM-019 Screen Capture API - apply a filter to a browser web page
DOM-020 Using the EyeDropper API
DOM-021 Popover API - use canvas elements in popover content
Drag zones
Button tabbing

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
Keyboard zones
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:

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

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
TensorFlow 001 Tensorflow tfjs-models / body-pix experiment - follow my eyes
TensorFlow 002 Tensorflow tfjs-models / body-pix experiment - model image output