# Scrawl-canvas documentation (for version 8.10.4)

### Scrawl-canvas modules

#### Scrawl.js - exports factories and other functions

- scrawl.js
- core/init.js

- init

- core/library.js

- 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

- library.sectionClasses

- library.purge()

#### Core

- core/display-cycle.js

- clear
- compile
- show
- render

- core/document.js
- core/document-root-elements.js
- core/events.js

- addListener
- addNativeListener
- makeAnimationObserver
- removeListener
- removeNativeListener

- getPixelRatio
- getIgnorePixelRatio
- setIgnorePixelRatio
- setPixelRatioChangeAction

- core/user-interaction.js

- currentCorePosition
- forceUpdate
- getTouchActionChoke
- setTouchActionChoke
- startCoreListeners
- stopCoreListeners

- mixin/base.js
- mixin/delta.js

#### Positioning

- mixin/mimic.js
- mixin/path.js
- mixin/pivot.js
- mixin/position.js

#### Canvas basic entity artefacts

- mixin/entity.js
- factory/block.js

- makeBlock

- factory/crescent.js

- makeCrescent

- factory/phrase.js

- makePhrase

- factory/picture.js

- makePicture

- factory/wheel.js

- makeWheel

#### Canvas path-based entity artefacts

- mixin/shape-basic.js
- mixin/shape-curve.js
- mixin/shape-path-calculation.js
- factory/bezier.js

- makeBezier

- factory/cog.js

- makeCog

- factory/line.js

- makeLine

- factory/line-spiral.js

- makeLineSpiral

- factory/oval.js

- makeOval

- factory/polygon.js

- makePolygon

- factory/polyline.js

- makePolyline

- factory/quadratic.js

- makeQuadratic

- factory/rectangle.js

- makeRectangle

- factory/shape.js

- makeShape

- factory/spiral.js

- makeSpiral

- factory/star.js

- makeStar

- factory/tetragon.js

- makeTetragon

#### Canvas particle-based entity artefacts

- factory/emitter.js

- makeEmitter

- factory/net.js

- makeNet

- factory/tracer.js

- makeTracer

#### Canvas compound entity artefacts

- factory/grid.js

- makeGrid

- factory/loom.js

- makeLoom

- factory/mesh.js (particles)

- makeMesh

#### Non-canvas artefacts

- mixin/display-shape.js
- mixin/dom.js
- factory/canvas.js

- addCanvas
- getCanvas
- setCurrentCanvas

- factory/cell.js
- factory/cell-fragment.js
- factory/element.js

- makeElement

- factory/stack.js

- addStack
- getStack

#### Assets

- mixin/asset.js
- mixin/asset-consumer.js
- mixin/asset-advanced-functionality.js
- factory/image-asset.js

- importImage
- importDomImage

- createImageFromCell
- createImageFromEntity
- createImageFromGroup

- factory/noise-asset.js (for Perlin noise, etc)

- makeNoiseAsset

- factory/raw-asset.js

- makeRawAsset

- factory/reaction-diffusion-asset.js

- makeReactionDiffusionAsset

- factory/sprite-asset.js

- importSprite

- factory/video-asset.js

- importDomVideo
- importMediaStream
- importVideo

- Note that Cells can also be used as assets

#### Styles

- mixin/pattern.js
- mixin/styles.js
- factory/color.js

- makeColor

- factory/conic-gradient.js

- makeConicGradient

- factory/gradient.js

- makeGradient

- factory/palette.js
- factory/pattern.js

- makePattern

- factory/radial-gradient.js

- makeRadialGradient

#### Filters

- mixin/filter.js
- factory/filter.js

- makeFilter

- factory/filter-engine.js

- setFilterMemoizationChoke

#### Particles and Physics

- factory/particle.js
- factory/particle-force.js

- makeForce

- factory/particle-history.js
- factory/particle-spring.js

- makeSpring

- factory/particle-world.js

- makeWorld

#### Groups

- mixin/cascade.js
- factory/group.js

- makeGroup

#### Animation

- core/animation-loop.js

- startCoreAnimationLoop
- stopCoreAnimationLoop

- factory/animation.js

- makeAnimation

- factory/render-animation.js

- makeRender

- factory/action.js

- makeAction

- factory/ticker.js

- makeTicker

- factory/tween.js

- makeTween

#### Anchors

- mixin/anchor.js
- factory/anchor.js

#### User interaction

- factory/drag-zone.js

- makeDragZone

- factory/keyboard-zone.js

- makeKeyboardZone

- factory/observe-update.js

- makeUpdater
- observeAndUpdate

#### Snippets (experimental)

- core/snippets.js

- makeSnippet

- factory/unstacked-element.js

#### Other modules

- core/random-seed.js

- seededRandomNumberGenerator

- core/shared-vars.js
- core/system-flags.js
- core/utilities.js
- factory/array-pool.js
- factory/font-attributes.js
- factory/state.js

- factory/coordinate.js

- requestCoordinate
- releaseCoordinate

- factory/quaternion.js

- requestQuaternion
- releaseQuaternion

- factory/vector.js

- requestVector
- releaseVector

### 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-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
- Filters-028 Stencil (background) filter functionality

#### 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

- 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 demos

- 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
- Particles-004 Emit particles along the length of a path
- Particles-005 Emit particles from inside an artefact's area
- 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
- Particles-010 Net entity: using a shape path as a net template
- Particles-011 Tracer entity: generation and functionality
- Particles-012 Use Net entity particles as reference coordinates for other artefacts
- 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

#### Module demos

- Modules-001 Scrawl-canvas modularized code - London crime charts (with accessible data)

- Module code london-crime-lines.js
- Module code london-crime-stacked-bars.js
- Module code simple-chart-frame.js
- Module code simple-chart-frame-tests.js
- Module code simple-graph-lines.js
- Module code simple-graph-stacked-bars.js

- Modules-002 Spiral charts

- Module code wikipedia-views-spiral-chart.js

- Modules-003 Factory functions to create more complex, compound entitys

- Module code entity-ring-builder.js

- Modules-004 Import and use Lottie animations

- Module code lottie-loader.js

- Modules-005 Accessible GUI-based simple canvas editor

- Module code canvas-scene-editor.js
- Module code canvas-minimap.js
- Module code dom-entity-editor.js
- Module code entity-copy-paste.js
- Module code entity-manipulation-gui.js
- Module code entity-navigation.js

- Modules-006 Animation observer; Scrollytelling

- Module code for first canvas
- Module code for second canvas
- Module code for third canvas
- Module code for fourth canvas
- Module code for demo canvases helper functionality

#### 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

- Animated hover gradient snippet
- Animated word gradient snippet
- Green box snippet
- Jazzy button snippet
- Page performance snippet
- Page performance snippet (test)
- Pan image snippet
- Placeholder effect snippet
- Ripple effect snippet
- Spotlight text snippet
- Spotlight text snippet (test)
- Word highlighter snippet

- Snippets-005 Create a responsive, interactive and accessible before/after slider infographic

- Before/after slider infographic snippet

- Snippets-006 Editable header text colorizer and animation effect snippets

- Text snippet helper
- Animated highlight gradient text snippet
- Bubbles text snippet
- Risograph text gradient snippet
- Swirling stripes text snippet
- Worley text gradient snippet

#### 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

#### 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