Scrawl-canvas inline documentation
(for version 8.16.0)
Scrawl-canvas modules
Scrawl.js - exports factories and other functions
- scrawl.js
- core/init.js
- core/library.js
- library.anchor
- library.animation
- library.animationtickers
- library.artefact
- library.asset
- library.canvas
- library.cell
- library.element
- library.entity
- library.filter
- library.force
- library.group
- library.particle
- library.spring
- library.stack
- library.styles
- library.tween
- library.unstackedelement
- library.world
Core
Positioning
Canvas basic entity artefacts
Canvas text entity artefacts
Canvas path-based entity artefacts
Canvas particle-based entity artefacts
Canvas compound entity artefacts
Non-canvas artefacts
Assets
Styles
Filters
Particles and Physics
Groups
Animation
Keyboard navigation (hidden DOM elements)
User interaction
Snippets (experimental)
Other modules
Scrawl Demo files
Test Demo Index Page
Utilities file
- utilities.js The utilities file includes some functionality common across the demo files. They are not part of the Scrawl-canvas codebase
Canvas demos
- 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; trigger canvas hover and drag UX
- 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 Path-defined entitys: Oval, Rectangle, Line, Quadratic, Bezier, Tetragon, Polygon, Star, Spiral, Cog
- Canvas-014 Line, Quadratic and Bezier entitys - control lock alternatives
- 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
- Canvas-025 Various responsive and non-responsive canvases; responsive images
- Canvas-026 Tower of Hanoi
- Canvas-027 Video control and manipulation; filter-based hit zone
- Canvas-028 Image magnifier; test some composite operations
- Canvas-029 Image smoothing
- Canvas-030 Polyline entity functionality
- Canvas-031 Cell generation and processing order - kaliedoscope clock
- Canvas-032 Freehand drawing
- Canvas-033 User preferences: prefers-color-scheme; prefers-reduced-motion; Javascript disabled
- Canvas-034 Determine the displayed shape of the visible canvas; react to changes in the displayed shape
- Canvas-035 Pattern style functionality
- Canvas-036 Cell artefact-like positional functionality
- Canvas-037 Pan and zoom using a Picture entity
- Canvas-038 Responsive Shape-based entitys
- Canvas-039 Detecting mouse/pointer cursor movements across a non-base Cell
- Canvas-040 Trace out a Shape path over time
- Canvas-041 Access and use a canvas context engine using the makeAnimation factory
- Canvas-042 Canvas entity clip regions
- Canvas-043 Test various clipping strategies
- Canvas-044 Building more complex patterns
- 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
- Canvas-047 Easing functions for Color and Tween factories
- Canvas-048 Display a filtered media stream
- 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
- Canvas-053 Display output from a Reaction-Diffusion asset
- Canvas-054 Animated contour lines: map a complex gradient to NoiseAsset output
- Canvas-055 Wide Gamut 2D Graphics using HTML Canvas
- Canvas-056 Seeded random number generator; point on path
- Canvas-057 Create and use a RawAsset object to modify an image asset
- Canvas-058 Group and ungroup entitys; create a bespoke drag-drop UX
- Canvas-059 Semi-accessible Minimap; multiple 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
- Canvas-073 2D Stable Fluids simulation (Stam 1999)
- Canvas-201 Label entity (make, clone, method); Label accessible text
- Canvas-202 Label entity - basic support for non-western fonts
- Canvas-203 Label entity - underline text
- Canvas-204 Label entity - gradients and patterns
- Canvas-205 Label entity - updating font parts; experiments with variable font
- 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
- Canvas-210 EnhancedLabel - TextUnit dynamic manipulation
- Canvas-211 EnhancedLabel entity - keyboard navigation; hit tests
- Canvas-212 EnhancedLabel entity - updating font parts; experiments with variable font
Filters demos
- Filters-001 Parameters for: red, green, blue, cyan, magenta, yellow, notred, notgreen, notblue, grayscale, sepia, invert filters
- Filters-002 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: curveNoise filter
- 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
- Filters-038 Using the matrix filter to create directional blur effects
- Filters-039 Parameters for: unsharp filter
- Filters-040 Parameters for: deconvolute filter
- Filters-041 Parameters for: zoomBlur filter
- Filters-042 Parameters for: okCurveWeights filter
Compound filters demos
- 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 demos
Particles and physics demos
Module demos
- Modules-001 Scrawl-canvas modularized code - London crime charts (with accessible data)
- Modules-003 Factory functions to create more complex, compound entitys
Packet demos
- Packets-001 Save and load Scrawl-canvas entity using text packets
- Packets-002 Scrawl-canvas packets - save and load a range of different entitys
Snippet demos
- Snippets-001 Scrawl-canvas DOM element snippets
- 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
- Snippets-006 Editable header text colorizer and animation effect snippets
DOM Stack demos
- 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 (kill) Scrawl-canvas stack elements programmatically
- DOM-011 Canvas controller 'fit' attribute; Cell positioning (mouse)
- DOM-012 Add and remove (kill) Scrawl-canvas canvas elements programmatically
- DOM-013 Track mouse movements over a 3d rotated and scaled canvas element
- DOM-014 Scrawl-canvas initialization: canvas interference check
- DOM-015 Use stacked DOM artefact corners as pivot points
- 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
Experiments with third party libraries
- Delaunator-001 Delauney triangulation and Voronoi cell visualisation
- Delaunator-002 Responsive Voronoi cells in a RawAsset wrapper
- MediaPipe-001 MediaPipe Selfie Segmentation - model image output
- MediaPipe-002 MediaPipe Face Landmarker - model image output
- MediaPipe-003 MediaPipe Hand Landmarker - model image output
- TensorFlow-001 Tensorflow tfjs-models / body-pix experiment - follow my eyes
- TensorFlow-002 Tensorflow tfjs-models / body-pix experiment - model image output