Scrawl Canvas Versions Save

Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element easier, and more fun

v8.13.1

2 weeks ago

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

Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.13.0...v8.13.1

v8.13.0

2 weeks ago

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: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.12.0...v8.13.0

v8.12.0

4 months ago

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

Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.11.0...v8.12.0

v8.11.0

4 months ago

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

Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.10.4...v8.11.0

v8.10.4

10 months ago

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: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.10.3...v8.10.4

v8.10.3

1 year ago

Breaking changes:

None

New functionality:

None

Improvements:

Extended linter checks. In addition to the default ESLint checks, we now check for:

  • no-inline-comments
  • no-sequences
  • no-unused-expressions
  • no-useless-call
  • no-useless-return
  • no-var
  • prefer-const
  • no-trailing-spaces
  • radix

Bugfixes:

Fixed bugs uncovered by linter

Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.10.2...v8.10.3

v8.10.2

1 year ago

Breaking changes:

None

New functionality:

None

Improvements:

  • Added linter to developer toolchain

Bugfixes:

  • Fixed bugs uncovered by linter

What's Changed

New Contributors

Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.10.1...v8.10.2

v8.10.1

1 year ago

Breaking changes:

None

New functionality:

None

Improvements:

  • Renamed some module files to restore a consistent naming strategy
  • Refactored modules to make use of a new systems-flags module
  • Refactored modules to make use of a new shared-vars module
  • Minor efficiency improvements (Object.freeze(), Object.seal(), new array pool, etc).

Bugfixes:

None of note

Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.10.0...v8.10.1

v8.10.0

1 year ago

Breaking changes:

  • getCanvas, getStack - the functionality of these calls have changed to take into account the library.purge functionality in the previous release. The advice on how to add SC to a React build has also changed to take into account React18 dev checks around the useEffect hook.
  • SC no longer adds a color factory (or anything else) to the DOM window object. Any code that relied on these (supposedly secret internal) functionalities will need fixing.

New functionality:

  • The SC observeAndUpdate factory function has been deprecated in favour of a new makeUpdater function. The arguments accepted for both factory functions remain the same.

Improvements:

  • SC tickers can now be tied to a renderAnimation object through a new observer attribute. When the renderAnimation starts/halts, tickers observing that object will also start/halt. SC tweens will also accept the new attribute and pass it on to their ticker when they are initialized
  • The canvas.buildCell function can now take a new willReadFrequently boolean, which defaults to true. All internal Cell wrappers now set this attribute to true, which has boosted rendering speeds by up to 20%.

Bugfixes:

  • A major refactor of the SC core modules, to remove all cyclic dependencies from the build.
  • Fix a makeGroup factory bug so the host attribute in the factory's argument can be a Stack or Cell object in addition to those objects' name String.

Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.9.10...v8.10.0

v8.9.10

1 year ago

Breaking changes:

None

New functionality:

None

Improvements:

  • Rewrote Demo tests modules-001, modules-002, modules-003, modules-004, modules-005 - modules now take the scrawl object as an argument rather than import Scrawl-canvas directly (to minimise potential library version conflicts)
  • Moved Demo test canvas-057 to modules-006, and modularised code
  • Tweens can now run against (manipulate) animationTicker, filter and world objects

Bugfixes:

  • Fixed keyboardZone bug
  • Fixed tween bug where tween updates were being applied to the group object rather than against the artefact objects contained in the group
  • Fixed drag-drop bug where, when a relatively positioned artefact was dragged, it had its coordinates set to absolute position values on drop

Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.9.9...v8.9.10