Scrawl-canvas documentation (for version 8.9.4)
Scrawl-canvas modules
Scrawl.js - exports factories and other functions
- scrawl.js
- core/init.js
- core/library.js
- library.radian
- library.version
- 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
- core/document.js
- addCanvas
- addStack
- getCanvas
- getStack
- setCurrentCanvas
- clear
- compile
- show
- render
- core/events.js
- addListener
- addNativeListener
- makeAnimationObserver
- removeListener
- removeNativeListener
- getPixelRatio
- getIgnorePixelRatio
- setIgnorePixelRatio
- setPixelRatioChangeAction
- core/userInteraction.js
- makeDragZone
- makeKeyboardZone
- observeAndUpdate
- currentCorePosition
- forceUpdate
- getTouchActionChoke
- setTouchActionChoke
- startCoreListeners
- stopCoreListeners
- mixin/base.js
- mixin/delta.js
Positioning
Canvas basic 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
Anchors
Snippets (experimental)
Other modules
Scrawl Demo files
Test Demo Index Page
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 Phrase entity (make, clone, method, multiline)
- Canvas-015a Phrase entity - cache output to improve render speeds
- 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
- Canvas-025 Various responsive and non-responsive canvases; responsive images
- Canvas-026 Tower of Hanoi
- Canvas-027 Video control and manipulation; chroma-based hit zone
- Canvas-028 Image magnifier; test some composite operations
- Canvas-029 Phrase entitys and gradients
- 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
- Canvas-051 Line Spirals
- Canvas-052 Create and use a RawAsset object to modify an image asset
- Canvas-053 Display output from a Reaction-Diffusion asset
- Canvas-054 Animated contour lines: map a complex gradient to NoiseAsset output
- Canvas-055 Crescent entity functionality
- Canvas-056 Seeded random number generator; point on path
- Canvas-057 Animation observer; animations controlled by scroll position
- 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
- 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
- Canvas-064 Animation object: gradient along a line
Filters demos
- 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: curveNoise filter
- Filters-025 Parameters for: glitch filter
- Filters-026 Parameters for: swirl filter
- Filters-027 Parameters for: reducePalette 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
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 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