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
None
None
None
constantSpeedAlongPath
bugs that were creating erratic movement along a path. The fix involved removing the redundant ???
attribute from path-based entitys.Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.13.0...v8.13.1
Text rendering
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
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
)
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
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.canvas.getBase()
to retrieve the base Cellcanvas.getBaseHere()
to retrieve the base Cell's here
objectholds
is required, they will be marked with ARIA-busy="true"
attributes while the resorting progresses.compile
step by default.Render objects
animation.renderOnce()
function to trigger a Display cycle render of an animation that is not currently runninganimation.updateHook(hookName, function)
function to dynamically update hook functionsPattern
useAsAsset
flag.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.set({ colors: [...]})
.rd.get('generation')
.binary
filter has been removed from the code base.group.getArtefactNames()
- returns an array of name Strings for all the artefacts in the Group object.direction
, fontKerning
, textRendering
, letterSpacing
, wordSpacing
, fontStretch
, fontVariantCaps
.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.Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.12.0...v8.13.0
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.focusAction
and blurAction
attributes to true
. These attributes are used to tie keyboard navigation and the canvas display closer together.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.display-p3
color space) by adding a data-canvas-color-space="display-p3"
attribute to the <canvas> element in HTML code.color()
format, where the browser itself also supports displaying those colors in the <canvas> element.EyeDropper API
(which is only supported by Chrome)Popover API
(which is not yet supported by Firefox)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.Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.11.0...v8.12.0
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.
None
This release is mainly backoffice updates to dev dependencies
Removing unused code identified by Knip; minor bugfixes uncovered by the typescript and eslint updates
Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.10.4...v8.11.0
None
None
Phrase entitys can now display emoji characters
New demo DOM 018 created to test the functionality of a canvas element which expands to fullscreen using the Fullscreen Web API
None
Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.10.3...v8.10.4
None
None
Extended linter checks. In addition to the default ESLint checks, we now check for:
Fixed bugs uncovered by linter
Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.10.2...v8.10.3
None
None
Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.10.1...v8.10.2
None
None
systems-flags
moduleshared-vars
moduleObject.freeze()
, Object.seal()
, new array pool, etc).None of note
Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.10.0...v8.10.1
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.window
object. Any code that relied on these (supposedly secret internal) functionalities will need fixing.observeAndUpdate
factory function has been deprecated in favour of a new makeUpdater
function. The arguments accepted for both factory functions remain the same.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 initializedcanvas.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%.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
None
None
scrawl
object as an argument rather than import Scrawl-canvas directly (to minimise potential library version conflicts)animationTicker
, filter
and world
objectsgroup
object rather than against the artefact
objects contained in the groupFull Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.9.9...v8.9.10