Scrawl-canvas v8.17.0

Breaking changes.

• Fix issues around offset filter

Improvements

• New filters: unsharpen, deconvolve, zoom-blur, ok-curve-weights

• New functionality and improvements for filters: gaussian-blur, matrix, tile, displace, glitch, swirl, blend, compose

• EnhancedLabel entity: use Intl.segmenter for Thai-like scripts

• EnhancedLabel entity: new startTextOnLine attribute

Test updates

Minor UI improvements across test demos

Bug fixes

• Fix Grid entity video bug (Safari)

• Fix EnhancedLabel entity CJK vertical text punctuation issue

What's Changed

• New okCurveWeights filter by @KaliedaRik in #143
• Winter 25-26 updates by @KaliedaRik in #141
• Bump to v8.17.0 by @KaliedaRik in #144

Full Changelog: v8.16.0...v8.17.0

Scrawl-canvas v8.16.0

Breaking changes.

• The Color object factory has been completely rewritten, breaking out the color data extraction, conversion and color string creation functionality into a new helpers/color-engine.js file.

• Color object instances have been simplified, and internal attributes radically changed. Code that relied on color instance private attributes will break. The color.extractRGBfromColor(string) function has been replaced by a new color.extractRGBfromColorString(string) function.

• With the rewrite of the color factory and color engine, calculations for range values between two colors have been brought into tighter alignment with standards specifications. This means that color ranges defined in HSL, HWB, LCH and OKLCH color spaces no longer match browser implementations of CSS gradients defined in those spaces.

• Tiles filter - filter API simplified to make it easier to use. This will break existing products already using the tiles filter to create displays. Test demo Filter-015 updated to reflect the new functionality.

• Reduced palette filter - The internal rewrite of this filter-'s functionality may lead to different outputs for a given minimumColorDistance attribute value.

• Artefact purge functionality has been deprecated and removed. This is to maintain consistent object shapes, enhancing JS engine efficiency. (Not to be confused with scrawl.purge(), which is completely different functionality.)

• Quaternion object - longstanding rotation calculation bugs have been fixed; so rotational representations are now expected and accurate. This may break code that made use of the old rotational expectations.

Improvements

• All filters have been substantially rewritten to make them faster and more memory efficient.

• Chroma filter - new parameters added to build in a feathering effect on a per-channel basis. Test demo Filters-010 updated to include the new parameters.

• Blend filter - two new blend options added: hue-match and chroma-match.

• Emitter entity - now has two new attributes: stampFirst, and processInReverse, which help define the entity's appearance.

• The Grid entity has new functionality to make changing tiles a little easier. Also, artefacts can now pivot to an individual Grid tile instead of the entity as a whole.

• Cell artefact get/paint cell data functionality recoded for efficiency.

• The palette/gradients system - rewritten to make use of the color system's better efficiencies.

• The Scrawl-canvas Run Book - continues to be developed.

Test updates

• MediaPipe demos - these demos have been updated to use the latest MediaPipe AI models deployed by Google.

Bug fixes

• Minor bug fixes in the particle object pool system

• Shape path calculation - minor bug fixes.

• Styles mixin - minor bug fixes.

What's Changed

• Summer 2025 updates by @KaliedaRik in #134
• Bump to v8.16.0 by @KaliedaRik in #135

Full Changelog: v8.15.0...v8.16.0

Scrawl-canvas v8.15.0

Breaking changes:

• Fixing the scaled positioning bug affecting Oval, Rectangle and Tetragon entitys means that these entitys now act correctly when scaled. Canvas scenes previously created with workarounds for the issue will need to be updated
• Tighten up the checks around which DOM elements can become SC Stacks, and which ones can become SC Elements. This may break existing Stack-based projects.
• Deprecate and remove the stack.apply, canvas.apply and element.apply functions, replacing them with new stack.reset and canvas.reset functions.
• VideoAsset object around wrapping media streams - the factory api for creating these asset wrappers has changed.

New functionality:

• Artefact group attribute will now accept a Cell object as a value
• New Loom attribute sourceExpansionFactor to help solve poor display of distorted images
• Added functionality to allow the scaling of entity shadows (similar to scaling line widths), controled by a new flag attribute scaleShadow
• Added a new splitShift function to allow for the movement of Cell edge strips from one side of the Cell to the other. Should help to make it easier to build animated tiling and infinite scroll scenes
• New Cell functions - getCellData, paintCellData - that supply the user with a capture of the Cell engine's imageData, alongside a new pixelState object which gives each pixel some state
• Allow Group objects to remove controlled DOM artefacts from the web page
• New <canvas> element data-will-read-frequently boolean attribute
• Cell pixelState now includes full polar coordinate (from canvas center) data
• New filters: alpha-to-luminance, luminance-to-alpha
• New functionality to help developers initialize DOM form control elements
• VideoAsset can now handle audio-only stream sources

Improvements:

• Security - updated dev dependency packages to latest version
• Documentation - started writing some higher level overview docs of the library's philosophy and its code base's practicalities (early work-in-progress)
• Typescript annotations in the test demo files
• Cleaned up factory/group.js file, removing unused code
• Improvements (and a minor bugfix) to the blur and gaussianblur filters - which now have their own Demo tests.
• Cleared out the DOM-related CSS checks for Stack, Canvas and Element artefacts - there's no need for this sort of functionality in SC now. Instead we introduce a short list of CSS properties which dev-users cannot update using SC set({ css: {key: value} }) functionality.
• Updated test demo DOM-003 to share a better example of how to wrap SVG elements into an SC Stack.
• Ripped out all code relating to the CSS smoothFont property - which is not part of the Web standards.
• Updated the Element kill function to accept a boolean argument which, when set to false, will not remove the associated DOM element from the document.
• Removed redundant code, relating to cloning functions, from SC clone functionality across the repo.
• Small Tween and Ticker performance improvements
• New demos for offset, offsetChannels filters
• Draft a Runbook for the library (incomplete)
• Update documentation to accommodate the new Runbook
• Add an LLM summary .md file to the repo
• Updates to the .d.ts file

Bugfixes:

• Small Vector bug fixed
• Fixed issue where entity GCO and filters were interfering with each other, preventing the display of entitys on non-base Cells
• Fixed a scaled positioning issue for Oval, Rectangle and Tetragon entitys
• Fixed a dynamic radius positioning issue for Star and Cog entitys
• The gaussianblur filter was spreading beyond its entity's shape. This has been fixed in a non-breaking way so the errant functionality remains the default.
• Unnecessary mixins were being added to mixin/dom.js - these have been moved to factory/canvas.js where they are needed. Bug was not breaking functionality in any way.
• Fixed the (long neglected) Element stampOrder bug.
• Fix bugs associated with prefers-contrast functionality
• Deprecate and remove the Ticker object makeTickerUpdateEvent code
• Fix bug where user positions an artefact wrt an undefined artefact
• Fix artefact removeClasses bug
• Fix Tween and Action object target setting functionality
• Fix other minor Ticker and Tween object bugs
• Fix filter engine image upload bug
• Fix tiny EnhancedLabel space calculation bug
• Deprecate and remove RenderAnimation object .error function hook
• Fix VideoAsset object streaming bugs
• Fix Group object ordering bug

What's Changed

• Bump micromatch from 4.0.7 to 4.0.8 by @dependabot in #100
• Autumn 2024 improvements by @KaliedaRik in #101
• Path-based entity review by @KaliedaRik in #112
• Add functionality to allow the scaling of shadows by @KaliedaRik in #113
• Add new Cell splitShift functionality by @KaliedaRik in #114
• New Cell functionality: getCellData, paintCellData by @KaliedaRik in #115
• Add showdown to toolchain by @KaliedaRik in #117
• Fix gaussian blur filter issue by @KaliedaRik in #121
• Remove unnecessary mixin includes from the DOM mixin by @KaliedaRik in #122
• Investigate DOM-related issues by @KaliedaRik in #123
• Remove redundant thrown errors; improve demo DOM-008 by @KaliedaRik in #129
• null checks on host by @davehorner in #130
• Developer Runbook by @KaliedaRik in #119
• Bump to v8.15.0 by @KaliedaRik in #116

New Contributors

• @davehorner made their first contribution in #130

Full Changelog: v8.14.0...v8.15.0

Scrawl-canvas v8.14.0

Breaking changes:

• Work on improving the filters code has led to some breaking changes to the display output by various filters - in particular the blend filter has been fixed to use OKLCH colors rather than HCL colors for its calculations. The reduce-palette filter has also moved over to using OKLAB-based color distance calculations which will cause existing canvases utilising that functionality to break their displayed output.

New functionality:

• Four new filters have been added
  • The modifyOk and modulateOk filters introduce channel manipulations for OKLAB colors
  • The rotateHue and negative filter calculate their effects using OKLCH colors

Improvements:

• Various minor efficiency improvements in codebase
• Demo rapier-001 removed - as much as we want to demo SC being used alongside some Wasm-based Rust, keeping up with the changes in the Rapier physics codebase was proving to be unwelcome and frustrating work.

Bugfixes:

• Fixed some documentation inaccuracies and errors

What's Changed

• Reduce-palette filter improvements experiment by @KaliedaRik in #96
• Initial MVP solution to display context menu by @KaliedaRik in #97
• Small improvements and bug fixes August 2024 by @KaliedaRik in #94
• Bump version to v8.14.0 by @KaliedaRik in #98

Full Changelog: 8.13.2...v8.14.0

Scrawl-canvas v8.13.2

Breaking changes:

None

New functionality:

None

Improvements:

• Various minor improvements in codebase
• Update dev dependencies to latest versions

Bugfixes:

None

What's Changed

• Update readme and bump dev dependency by @KaliedaRik in #91
• Minor enhancements month May 2024 by @KaliedaRik in #90
• Bump braces from 3.0.2 to 3.0.3 by @dependabot in #92
• Bump to v8.13.2 by @KaliedaRik in #93

Full Changelog: v8.13.1...8.13.2

Scrawl-canvas v8.13.1

Breaking changes:

None

New functionality:

None

Improvements:

None

Bugfixes:

• Fix constantSpeedAlongPath bugs that were creating erratic movement along a path. The fix involved removing the redundant ??? attribute from path-based entitys.
• Fix an issue with EnhancedLabel entitys where they broke when required to stamp themselves on non-base Cell canvases.

What's Changed

• Bump tar from 6.2.0 to 6.2.1 by @dependabot in #88
• Hotfixes following release of v8.13.0 by @KaliedaRik in #87
• Bump to v8.13.1 by @KaliedaRik in #89

Full Changelog: v8.13.0...v8.13.1

Scrawl-canvas v8.13.0

Breaking changes:

Text rendering

• The Phrase entity has been deprecated and removed from the library. Two new entitys replace it: Label and EnhancedLabel. See the new functionality section below for details about these new entitys.

Cell rendering

• During this work a major bug in determining non-base Cell sizes was uncovered. The fix (detailed in the bugfixes section below) does carry the risk of breaking canvases which make use of non-base Cells.

New functionality:

• Label entity - a single line text rendering entity. See new Demos canvas-201 - canvas-205 to discover its full functionality.
• EnhancedLabel entity - a multiline, styleable text layout engine which uses other artefacts (not just blocks/rectangles) to act as a template in which it can stamp its text. Can handle international fonts, vertical text, text-along-a-path, local text unit positioning and styling, etc. See new Demos canvas-206 - canvas-211 to uncover its full functionality.

With the introduction of the EnhancedLabel entity, we have also take the opportunity to add the ability for SC artefacts to pivot themselves to individual text units within the EL entity. This is achieved by pivoting to the EL and indicating the desired text unit by supplying its index number in a new pivotIndex (also for line/quadratic/bezier entitys: startControlPivotIndex, controlPivotIndex, endControlPivotIndex, endPivotIndex)

Improvements:

Library

We have added new convenience functions for finding/retrieving existing objects from the library. These include:

• scrawl.findArtefact('name')
• scrawl.findAsset('name')
• scrawl.findCanvas('name')
• scrawl.findElement('name')
• scrawl.findEntity('name')
• scrawl.findFilter('name')
• scrawl.findGroup('name')
• scrawl.findPattern('name')
• scrawl.findStack('name')
• scrawl.findStyles('name')
• scrawl.findTween('name')

New font checking functions:

• scrawl.checkFontIsLoaded('name')
• scrawl.getFontMetadata('name')
• scrawl.purgeFontMetadata()
• scrawl.recalculateFonts()

New shorthand convenience function

• scrawl.purge('namespace') - this maps to scrawl.library.purge('namespace').

Canvas

• The Canvas artefact has been refactored to create all of its various hold HTML elements within the canvas shadow DOM; it no longer pollutes the wider DOM by attaching (some of) these elements to the end of the DOM document.
• New convenience function canvas.getBase() to retrieve the base Cell
• New convenience function canvas.getBaseHere() to retrieve the base Cell's here object
• When resorting of the Canvas element's text and navigation holds is required, they will be marked with ARIA-busy="true" attributes while the resorting progresses.
• The Canvas artefact's base Cell is now placed at the end of the Display cycle compile step by default.

Render objects

• A new animation.renderOnce() function to trigger a Display cycle render of an animation that is not currently running
• A new animation.updateHook(hookName, function) function to dynamically update hook functions

Pattern

• Cell artefacts acting as a Pattern asset no longer have to be explicitly marked with the useAsAsset flag.
• New get strings can be used on a Pattern object to retrieve data about the Pattern's matrix: matrixA, matrixB, matrixC, matrixD, matrixE, matrixF, stretchX, stretchY, skewX, skewY, shiftX, shiftY.

Miscellaneous

• Noise asset gradient colors can now be set directly on the asset using noise.set({ colors: [...]}).
• Reaction-diffusion asset instances - retrieve the asset's current generation using rd.get('generation').
• The deprecated (and useless) binary filter has been removed from the code base.
• New Group convenience function group.getArtefactNames() - returns an array of name Strings for all the artefacts in the Group object.
• The entity state object now includes the following attributes: direction, fontKerning, textRendering, letterSpacing, wordSpacing, fontStretch, fontVariantCaps.
• There is no longer a need for us to offer alternative code paths for different browsers. Thus we have removed all browser detection code from the code base.

Bugfixes:

• Identified a bug where non-base Cell objects were setting their dimensions with reference to the display canvas dimensions, not their base Cell's dimensions. However, as this is a longstanding undetected issue, we have decided not to directly fix, but instead added a Cell artefact flag attribute setRelativeDimensionsUsingBase - this is by default false, but if users find their canvases breaking in mysterious ways they should consider setting the attribute to true when creating a new non-base Cell.
• Fixed a memory leak involving Emitter entity particleHistory objects

Full Changelog: v8.12.0...v8.13.0

Scrawl-canvas v8.12.0

Breaking changes:

• Phrase entity support for font-variant and font-stretch attributes has been removed. No browser was acting on these attributes when used in font strings, so little/no damage is expected from this change. There is no plan to support these text attributes going forward as their implementation in the 2D Canvas API specs are incompatible with the way Scrawl-canvas works internally.
• Anchor objects (and the new Button objects) now default their focusAction and blurAction attributes to true. These attributes are used to tie keyboard navigation and the canvas display closer together.

New functionality:

• scrawl.importScreenCapture - Similar to the existing scrawl.importMediaStream functionality which makes it easier for users to use media streams (eg: from device cameras) in canvas animations, this new function call will capture a real-time browser tab, window or an entire screen as a video source for use in the animation.
• Scrawl-canvas canvases can now support wide-gamut colors (the display-p3 color space) by adding a data-canvas-color-space="display-p3" attribute to the <canvas> element in HTML code.
• Animation objects can now take a new maxFrameRate attribute to limit the speed at which animations run. This is a necessary change as devices/browsers that run at 120fps become more common.
• A new Scrawl-canvas Button object - this works similarly to existing Anchors, except they trigger some action in response to user action (whereas Anchors trigger a navigation to a new web page).

Improvements:

• Scrawl-canvas now supports defining colors using the CSS color() format, where the browser itself also supports displaying those colors in the <canvas> element.
• Some minor improvements to gradient efficiency.
• New demo test exploring how to use the EyeDropper API (which is only supported by Chrome)
• New demo to test that a Scrawl-canvas canvas behaves appropriately and accessibly when included in HTML markup using the new Popover API (which is not yet supported by Firefox)
• Added a new tabOrder attribute to Anchor (and Button) objects. This allows the tabbing order of these objects to be updated dynamically without affecting the tabbing order of elements in the wider web page beyond the <canvas> element.

Bugfixes:

• We have removed the legacy <nav> div which Scrawl-canvas added at the top of each web page on which it ran.
• We have fixed an annoying tabbing order bug in demo canvas-027 (the interactive video demo).

What's Changed

• Experiment - modify screen capture stream by @KaliedaRik in #57
• Deprecate font stretch and variant functionality by @KaliedaRik in #59
• Add star-history chart to README by @KaliedaRik in #61
• Investigate Wide Gamut 2D Graphics (p3 color) by @KaliedaRik in #60
• Support new CSS color() strings by @KaliedaRik in #62
• Separate workstore from filter engine by @KaliedaRik in #64
• Add a frame rate limit to animation objects by @KaliedaRik in #65
• Eye dropper api demo by @KaliedaRik in #66
• Investigate Popover API by @KaliedaRik in #67
• Add order functionality for anchors buttons by @KaliedaRik in #69
• Bump to v8.12.0 by @KaliedaRik in #70
• v8.12 - late lint updates by @KaliedaRik in #71

Full Changelog: v8.11.0...v8.12.0

Scrawl-canvas v8.11.0

Breaking changes:

We have updated the licence wording which users will need to review and agree to if they wish to continue using this library. The licence remains MIT-inspired.

New functionality:

None

Improvements:

This release is mainly backoffice updates to dev dependencies

• Adding knip to the testing rig
• Move to the browser-sync server for local development

Bugfixes:

Removing unused code identified by Knip; minor bugfixes uncovered by the typescript and eslint updates

What's Changed

• Bump word-wrap from 1.2.3 to 1.2.5 by @dependabot in #42
• Investigate yarn update by @KaliedaRik in #43
• Add .npmignore file to reduce npm package by 90% by @KaliedaRik in #45
• Add the Knip tool to the dev toolchain by @KaliedaRik in #46
• Licence update 2023 by @KaliedaRik in #47
• Update knip dependency to v3.8.1 by @KaliedaRik in #52
• Minor bugfixes Dec 2023 by @KaliedaRik in #53
• Preparation to release v8.11.0 by @KaliedaRik in #54
• Test and finalize v8.11.0 by @KaliedaRik in #55
• PRs waiting to be merged into base as v8.11.0 by @KaliedaRik in #44

Full Changelog: v8.10.4...v8.11.0

Scrawl-canvas v8.10.4

Breaking changes:

None

New functionality:

None

Improvements:

Phrase entitys can now display emoji characters

• Demos canvas 015, 015a, 16, 17, 18 updated to test this improvement

New demo DOM 018 created to test the functionality of a canvas element which expands to fullscreen using the Fullscreen Web API

Bugfixes:

None

Full Changelog: v8.10.3...v8.10.4