Scrawl-canvas v8 - tests index

Hello World

Hello world test

Canvas tests

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

Filters functionality tests

Filters 001 - Parameters for: blur filter
Filters 002 - Parameters for: red, green, blue, cyan, magenta, yellow, notred, notgreen, notblue, grayscale, sepia, invert filters
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 - Using assets in the filter stream; filter compositing
Filters 016 - Filter blend operation
Filters 017 - Parameters for: displace filter
Filters 018 - Parameters for: emboss filter
Filters 019 - Using a Noise asset with a displace filter
Filters 020 - Parameters for: clampChannels filter

CSS/SVG filter String functionality tests

To be aware: 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

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

Component tests (experimental!)

Component 001 - Scrawl-canvas DOM element components
Component 002 - Scrawl-canvas stack element components
Component 003 - Save and load Scrawl-canvas entity using text packets
Component 004 - Scrawl-canvas packets - save and load a range of different entitys
Component 005 - Scrawl-canvas modularized code - London crime charts
Component 006 - Spiral charts
Component 007 - Factory functions to create more complex, compound entitys

DOM and Stack tests

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