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

Overview

Scrawl-canvas Library

Version: 8.5.2 - 11 Mar 2021

Scrawl-canvas website: scrawl-v8.rikweb.org.uk.

Do you want to contribute? I've been developing this project for too long by myself, and would really welcome contributions from - even collaboration with - people who can bring a different perspective and a fresh set of eyes to the work.

Rate on Openbase

What?

Scrawl-canvas is a JavaScript library for working with the HTML5 <canvas> element. The library:

  • Automatically discovers existing <canvas> elements in a web page.
  • Can add new <canvas> elements to the web page.
  • Defines a set of factory functions for creating a wide range of graphic artefacts and effects, which can be drawn on a canvas.
  • Includes an adaptable - yet easy to use - protocol for positioning, displaying and animating artefacts and effects across the canvas.
  • Adds functionality to make <canvas> elements responsive, adapting their size according to their surrounding environment.
  • Makes the canvas both accessible, and interactive - including the ability to easily track user interactions with different parts of the canvas.

Why?

There are a number of other Javascript libraries available, each with their strengths and weaknesses. Some have been designed to make the production of charts and other data visualisations easier. Some focus on game development, others on making videos interactive. Libraries which attempt to emulate Flash/Actionscript animations have been developed, as have libraries whose aim is to combine 2D, 3D and even SVG graphics into a usable whole. Speed is a key goal for some of the best libraries, while ease-of-use is an objective for many others.

Working with the native Canvas API is hard work - particularly when the desired result is more complex than a couple of coloured boxes in a static display.

But the benefits of using canvases for graphical displays and animations are also great: canvases are part of the DOM (unlike Flash); they are natively wired for events and user interactions; they use immediate mode redering (which makes them very quick); and the canvas-related APIs are designed to be used with Javascript.

Yet these advantages are also significant barriers:

  • Working directly with the canvas-related APIs leads to writing significant amounts of JS boilerplate code.
  • <canvas> elements can be resized and styled using CSS, but changing the CSS size does not affect the element's drawing dimensions - leading to sub-optimal graphic displays.
  • Events work on the canvas, not on the artefacts within the canvas - we cannot use artefacts as links or hot-spots (click/tap events), we cannot give them the equivalent of a CSS hover state (focus/blur events), we cannot drag-and-drop them around the display (move events).
  • Tracking a user's interaction with the various parts of a canvas display is particularly difficult.
  • We cannot save and share artefacts and effects; each canvas display is tightly coupled to the code that defines the display.
  • Of most concern, canvases are entirely graphical - visual - by nature; they come with significant accessibility issues. Given the ever-stricter requirements for websites to be accessible to all users, this makes using a canvas to present important information a dangerous proposition.

Scrawl-canvas overcomes these barriers

Yes, Scrawl-canvas aims to be fast, and developer-friendly. It also aims to be broadly focussed, suitable for building infographics, games, interactive videos - whatever we can imagine for a 2D graphical presentation.

But the main purpose of Scrawl-canvas is to make the <canvas> element, and the parts that make up its displays and animations, responsive, interactive, linkable, trackable. And accessible!

Installation and use

There are three main ways to include Scrawl-canvas in your project:

Download, unpack, use

  1. Download the zipped file from GitHub
  2. Unzip the file to a folder in your project.
  3. Import the library into the script code where you will be using it.

Alternatively, a zip package of the v8.5.2 files can be downloaded from this link: scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-5-2.zip - this package only includes the minified file.

<!-- Hello world -->
<!DOCTYPE html>
<html>
<head>
    <title>Scrawl-canvas Hello World</title>
</head>
<body>
    
    <canvas id="mycanvas"></canvas>

    <!-- The library is entirely modular and needs to be imported into a module script -->
    <script type="module">

        import scrawl from './relative-or-absolute/path/to/scrawl-canvas/min/scrawl.js';

        // Get a handle to the canvas element
        let canvas = scrawl.library.canvas.mycanvas;

        // Setup the scene to be displayed in the canvas
        scrawl.makePhrase({

            name: 'hello',
            text: 'Hello, World!',

            width: '100%',

            startX: 20,
            startY: 20,

            font: 'bold 40px Garamond, serif',
        });

        // Render the canvas scene once
        canvas.render()
        .catch(err => {});

    </script>

</body>
</html>

CDN - unpkg.com

This will pull the requested npm package directly into your web page:

<script type="module">
    import scrawl from 'https://unpkg.com/[email protected]';
    [...]
</script>

NPM/Yarn

This approach is still experimental: Scrawl-canvas has been designed for use in the browser, not server-side. Add the library to a React/Vue/Svelte/etc project at your own risk - your mileage may vary!

  1. Add the library to your project using NPM or Yarn
  2. Import the library into the script code where you will be using it.
// either
$> npm install scrawl-canvas

// or
$> yarn add scrawl-canvas

// then in your script file
import scrawl from 'scrawl-canvas';

// Scrawl-canvas has no dependencies
// - it can be used as-is, with no further installation steps required

Local development and testing

After downloading the library and unzipping it into a directory or folder, cd into that folder on the command line, run yarn install or npm install (for the toolchain - the library itself has no external dependencies) and start a local server. For instance if you have light-server installed:

$> cd ./path/to/Scrawl-canvas
$> yarn install
$> light-server --serve . --open

light-server is listening at http://0.0.0.0:4000
  serving static dir: .

Testing

The code base does not include any unit testing frameworks. Instead, we rely on a set of Demo tests which allow us to perform integration testing and user interface testing.

Why this approach? Because most of the Scrawl-canvas functionality revolves around various forms of animation, which requires visual inspection of the Demo tests to check that the canvas display - and thus, by inference, the underlying code - performs as expected.

Most Demos include some form of user interaction, which allows us to test specific aspects of the code base.

Documentation

The source code has been extensively commented. We generate documentation from that code using Docco. Documentation is regenerated each time the library is rebuilt.

Minification

We minify the source code using rollup and its terser plugin.

Building the library

Running the following command on the command line will recreate the minified file, and regenerate the documentation:

$> yarn build

Development team

Developed by Rik Roots: [email protected]

Comments
  • Chrome UI fund request

    Chrome UI fund request

    As described in this repository's README.md[1] file, Scrawl-canvas exists to help make the HTML5 canvas element more responsive, interactive and accessible for end users. I have designed this Javascript library to make developing more responsive, accessible canvas outputs easier for web developers.

    As things stand, I have been the sole developer and maintainer of Scrawl-canvas for over 8 years, and I have no plans to stop this work in the known future. My key failure over this time has been my inability to build a community of developers and users to help with this (what I consider to be important) work. As clever as I may think I am, I'm not very good at promoting the library, or the issues that the library is designed to tackle.

    The initial aim for this (small) funding request is, initially, to help cover the hosting and development costs for the library's dedicated website[2][3]. That site includes extensive documentation on learning and using the code, as well as a wide range of demonstrations, which makes it an integral part of the product. These uncertain times (and my age) have made me realise that not being able to cover those costs - for whatever reason - would cripple the entire project. Additionally, I have a CodePen[4] Pro account which I use to create the CodePen examples embedded into the 'Learn' sections of the library website.

    While this funding request may address the initial aim, it does not address the biggest problem facing the Scrawl-canvas project: the lack of a viable community surrounding it. Without a community, I can't raise awareness of the project among developers, project managers and other key players. And without that awareness, the project will fail to deliver on its keystone purpose: to give end users a better experience of a webpage through the use of properly responsive, interactive and - most importantly -accessible canvas-based graphics and animations. I don't know how to solve this problem - maybe others can advise?

    [1] - README.md link: https://github.com/KaliedaRik/Scrawl-canvas/blob/master/README.md [2] - Library website: https://scrawl-v8.rikweb.org.uk/ [3] - Library website's code on GitHub - https://github.com/KaliedaRik/scrawl-canvas-website [4] - CodePen link: https://codepen.io/collection/RzzMjw

    opened by KaliedaRik 5
  • Scrawl-canvas v8 improvements

    Scrawl-canvas v8 improvements

    If people have suggestions for improvements we can make to the library, then please leave them in a comment below.

    The scope of an improvement is that it should not compromise or break existing functionality. Adding to the library's API is fine.

    Discussion about suggested improvements is welcome!

    roadmap 
    opened by KaliedaRik 4
  • How to apply a clipping artefact to a specific image artefact only? (Question)

    How to apply a clipping artefact to a specific image artefact only? (Question)

    The demo's do sometimes a bit too much, which makes it a little more difficult to disect the information you're trying to learn form them. However, after working with it for a few hours and reading through the tutorials I came very close to my goals, and must say that it's a very capable library, although I have no experience with other similar ones, I am absolutely very happy choosing this one for my little project.

    There is however one thing that I have so far not been able to figure out, and that is how to apply clipping to only certain artefacts (and probably by extension, grouping, as I have a feeling it might be accomplished through groups). This screenshot shows the issue, there are two images, a background (the person in the suit) and a foreground (the ring which is a transparent png, with some shading on the inside of the ring. Then there is a third artefact, a wheel-clip, which I want to ONLY apply to the background image.

    image

    I have been playing around with order and groups, but have been so far unsuccesful.

    At the end of the 'struggle', this was the code producing the screenshot above (as you may notice there are is a variable scale and postioning, which I took from the Pan&Zoom example ;-) ):

                this.canvas = scrawl.getCanvas('#mycanvas')
                let base = this.canvas.base,
                    baseGroup = scrawl.library.group[base.name];
    
                let naturalWidth = document.getElementById("subjectImg").naturalWidth
                let naturalHeight = document.getElementById("subjectImg").naturalHeight
                let maxScale = (naturalHeight / this.frameDimension)
                if (!this.currentScale) {
                    this.currentScale = maxScale
                }
                let minScale = 1
                let fromLeft = 0
                let fromTop = 0
    
                this.canvas.set({
                    width: this.frameDimension,
                    height: this.frameDimension,
                    checkForResize: true,               // ?
                    baseMatchesCanvasDimensions: true,  // ?
                    isComponent: true,                  // ??
                }).setAsCurrentCanvas();
    
                // Ring
                this.tokenRing = scrawl.makePicture({
                    name: `token-image`,
                    imageSource: `/../img/ring.png`,
                    width: '100%',
                    height: '100%',
                    copyWidth: '100%',
                    copyHeight: '100%',
                    order:2,
                });
    
                // Subject
                let tokenSubject = scrawl.makePicture({
                    name: 'token-subject',
                    imageSource: `/../img/background.png`,
                    width: '100%',
                    height: '100%',
                    copyWidth: this.currentScale * this.frameDimension,
                    copyHeight: this.currentScale * this.frameDimension,
                    copyStartX: fromLeft,
                    copyStartY: fromTop,
                    filter: 'drop-shadow(2px 2px 2px #000000)',
                    order: 1,
                });
    
                scrawl.makeWheel({
                    name: 'wheel-clip',
                    //radius: 257,
                    radius: 270,
                    startAngle: 0,
                    endAngle: 360,
                    includeCenter: true,
                    startX: 279,
                    startY: 279,
                    handle: ['center', 'center'],
                    method: 'clip',
                    order: 3,
                })
    
                scrawl.makeRender({
                    name: "demo-animation",
                    target: this.canvas,
                });
    
    opened by Sjoerd82 2
  • Empty scrawl.library.canvas (canvas could not be found?) in Vue2

    Empty scrawl.library.canvas (canvas could not be found?) in Vue2

    I am new to scrawl-canvas (like 10-minutes in kind of new), so my first goal is to get the hello world to work within my Vue2 project (soon to be Vue3), with the end goal of generating a downloadable 256x256 avatar based on a transparent png + circular mask + another image (seems within the realm of Scrawl-canvas possibilities, right?).

    I'm trying the hello world example from the front page. But this being Vue, this happens within a component:

    <template>
        <div>
            <canvas id="mycanvas"></canvas>
            <v-btn @click="helloworld()">go!</v-btn>
        </div>
    </template>
    import * as scrawl from 'scrawl-canvas'
    export default {
        methods: {
            helloworld() {
                let canvas = scrawl.library.canvas.mycanvas
                console.log(scrawl.library.canvas) // empty object!
    
                // Setup the scene to be displayed in the canvas
                scrawl.makePhrase({
                    name: 'hello',
                    text: 'Hello, World!',
                    width: '100%',
                    startX: 20,
                    startY: 20,
                    font: 'bold 40px Garamond, serif',
                });
    
                // Render the canvas scene once
                canvas.render(); // Error, canvas is undefined.
            }
        },
    }
    

    However, the canvas object remains empty.

    opened by Sjoerd82 2
  • Bump lodash from 4.17.20 to 4.17.21

    Bump lodash from 4.17.20 to 4.17.21

    Bumps lodash from 4.17.20 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 2
  • Phrase element - letter spacing issue

    Phrase element - letter spacing issue

    When adding letter spacing to a multiline Phrase entity, the spacing applies itself in front of the first letter of the text, both when left-justified and full-justified.

    To view the issue, go to demo Canvas 017 and apply letter spacing to the entity. Screenshot 2021-01-05 at 20 40 37

    bug 
    opened by KaliedaRik 2
  • Respond to prefers-reduced-motion OS user preferences

    Respond to prefers-reduced-motion OS user preferences

    The prefers-reduced-motion media query detects whether the user has requested the operating system to minimise the amount of animation or motion it uses - see web.dev article here https://web.dev/prefers-reduced-motion/

    We can add functionality to the library to detect, and act on, user preferences (as set in the user's device OS) to reduce the amount of animation they are exposed to. To do this, we need to:

    1. Detect the initial setting - if the motion setting is set to 'reduced' then we can enforce all animations to halt after a maximum of 5 seconds

    2. Detect changes in the setting - which in turns runs/halts the animations

    See MDN links for detecting media queries in Javascript - https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia and https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries

    For testing, we need to simulate user settings in the browser - see https://umaar.com/dev-tips/211-media-query-simulation/

    The scope of this ticket excludes subsequent user behaviour eg to start an animation running by clicking on a canvas/stack 'run' button

    accessibility 
    opened by KaliedaRik 1
  • Add video-like controls to canvas animations

    Add video-like controls to canvas animations

    Issue: Users need to be able to access a mechanism that allows them to play and pause a canvas-based animation. They also need a similar mechanism which will allow them to hide a canvas - particularly for animations that include flickering or flashing content.

    See https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html

    accessibility 
    opened by KaliedaRik 1
  • Scrawl-canvas v9 roadmap

    Scrawl-canvas v9 roadmap

    If people have suggestions for big, possibly breaking, changes to Scrawl-canvas, please leave them in a comment below.

    Discussion on suggested changes is welcome!

    roadmap 
    opened by KaliedaRik 0
Releases(v8.9.6)
  • v8.9.6(Dec 21, 2022)

    Breaking changes:

    None

    New functionality:

    None

    Improvements:

    None

    Bugfixes:

    • Fix issues affecting package.json

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.9.5...v8.9.6

    Source code(tar.gz)
    Source code(zip)
  • v8.9.5(Dec 20, 2022)

    Breaking changes:

    Minor breaking changes to the Reduce Palette filter

    New functionality:

    None

    Improvements:

    • Updated package.json to include "type": "module" attribute

    Bugfixes:

    • Minor fixes to the Reduce Palette filter

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.9.4...v8.9.5

    Source code(tar.gz)
    Source code(zip)
  • v8.9.4(Nov 19, 2022)

    Breaking changes:

    None

    New functionality:

    None

    Improvements:

    • New color spaces support: OKLAB, OKLCH

    Bugfixes:

    • Minor demo updates to accommodate new color spaces

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.9.3...v8.9.4

    Source code(tar.gz)
    Source code(zip)
  • v8.9.3(Aug 9, 2022)

    Breaking changes:

    None

    New functionality:

    • New tiles filter
    • New newsprint filter
    • New compound filter demos

    Improvements:

    • New noTarget attribute for makeRender factory. By default, render objects created with no target Canvas/Stack wrappers will use the SC default clear/compile/show functions to render all Canvas/Stack elements on the page. Setting the noTarget attribute to true will prevent this happening.

    Bugfixes:

    • Fix bugs in the blend and compose filters
    • Fix Group.getArtefact()
    • Fix Cell Display cycle rendering to remove unnecessary function calls

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.9.2...v8.9.3

    Source code(tar.gz)
    Source code(zip)
  • v8.9.2(Jul 19, 2022)

    Breaking changes:

    None

    New functionality:

    Artefact attribute order now split into new processingOrder and stampOrder attributes. Artefacts that are used by other artefacts for positional data, and thus need to be calculated first, but also need to display over the top of those other artefacts, can split their ordering values accordingly. Setting order (which is now a pseudo-attribute) will set both new attributes to the supplied value. Getting order will return the stampOrder value

    Improvements:

    The reduce-palette and corrode filters have been rewritten to make them more efficient, and faster

    Bugfixes:

    None

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.9.1...v8.9.2

    Source code(tar.gz)
    Source code(zip)
  • v8.9.1(Jul 13, 2022)

    Breaking changes:

    None

    New functionality:

    New makeKeyboardZone to improve the developer experience of adding keyboard events to Canvas and Stack wrappers and their DOM elements

    Improvements:

    Extended the functionality of makeDragZone so multiple drag zones set on a Canvas or Stack wrapper can be ordered by priority. Shift + mouse drag-drop events are now supported

    Bugfixes:

    Fixed some minor bugs surrounding accessibility.

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.9.0...v8.9.1

    Source code(tar.gz)
    Source code(zip)
  • v8.9.0(Jun 16, 2022)

    Scrawl-canvas v8.9.0

    Breaking changes:

    Scrawl-canvas will no longer process all <canvas> elements that it discovers on first run. Instead elements must be specifically marked with an attribute - data-scrawl-canvas - if they are to be processed by the library. This is to prevent the library interfering with <canvas> elements required by third party libraries (eg: Chart.js), or added to the page by third party libraries during page load (eg: PixiJS).

    In a similar vein, the attribute data-stack changes to data-scrawl-stack.

    New functionality:

    None

    Improvements:

    None

    Bugfixes:

    Fixed some Safari-specific bugs; some limitations imposed on Safari (eg: memoizing filters) have been lifted.

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.8.2...v8.9.0

    Source code(tar.gz)
    Source code(zip)
  • v8.8.2(Jun 4, 2022)

    Scrawl-canvas v8.8.2

    Breaking changes:

    none

    New functionality:

    none

    Improvements:

    A new, hopefully easier, approach to creating responsive canvas elements in HTML; demo Canvas 025 rewritten

    Some improvements and bugfixes to rendering canvas text with the Phrase entity

    New demo - Snippets 006: Editable header text colorizer and animation effect snippets

    Bugfixes:

    Minor bugfixes

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.8.1...v8.8.2

    Source code(tar.gz)
    Source code(zip)
  • v8.8.1(Mar 28, 2022)

    Scrawl-canvas v8.8.1

    Breaking changes:

    none

    New functionality:

    none

    Improvements:

    none

    Bugfixes:

    Fix a drawImage() issue which impacts on render speeds in Firefox and Chrome

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.8.0...v8.8.1

    Source code(tar.gz)
    Source code(zip)
  • v8.8.0(Feb 5, 2022)

    #Scrawl-canvas v8.8.0

    Breaking changes to:

    • Scrawl-canvas library no longer exports a default object. To fix, replace all instances of import scrawl from 'path/to/library/scrawl/file'; with import * as scrawl from 'path/to/library/scrawl/file';

    New functionality:

    • TypeScript support - we have added a scrawl.d.ts file to the source folder, to accompany the existing scrawl.js exports file.

    Improvements to:

    • Added Demo Modules-004 to demonstrate how to import Lottie animation files into Scrawl-canvas

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.7.0...v8.8.0

    Source code(tar.gz)
    Source code(zip)
  • v8.7.0(Jan 15, 2022)

    Breaking changes to:

    • SC Color objects - removed rgb-related min/max values, rgb delta animation functionality; added support for hsl, hwb, lch, lab color spaces and related CSS color strings.
    • SC gradient-mapping filter - renamed attributes to better align with Color object attributes, as used internally by gradients.

    New functionality

    • SC now supports all CSS color strings, as used for: entity fillStyle, strokeStyle, shadowColor attributes; gradient color stop values.
    • All SC gradients, and Color objects, can be set to use the following color spaces internally: RGB, HSL, HWB, XYZ, LAB, LCH.
    • All SC gradients can use easing functions to determine the spread of colors across their palette.
    • Filter memoization, for faster, more efficient rendering of filter output.
    • New reducePalette filter, which takes an image, analyses it to create a limited palette of colors, and generates a dithered output using that palette. Supports both random-noise and blue-noise dithering.

    Improvements to:

    • Demos that can be resized, to make it clearer how to resize them.
    • All filter-related demos can now use image files dragged onto the canvas element

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.6.5...v8.7.0

    Source code(tar.gz)
    Source code(zip)
  • v8.6.5(Dec 6, 2021)

    Improvements to:

    • Touch screen enhancements added
    • All demo tests now annotated with touch screen requirements for that test

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.6.4...v8.6.5

    Source code(tar.gz)
    Source code(zip)
  • v8.6.4(Nov 21, 2021)

    New functionality:

    • Image smoothing functionality added

    Improvements to:

    • Support for enhanced animation observer and scrolling added

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.6.3...v8.6.4

    Source code(tar.gz)
    Source code(zip)
  • v8.6.3(Nov 14, 2021)

    Breaking changes to functionality:

    • Move accessibility functionality from the scrawl object to Canvas and Stack wrappers - this means accessibility can be defined on a per-canvas basis rather than for the entire web page

    Non-breaking bug fixes for:

    • clearCell bugfix for Safari browsers

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/8.6.2...v8.6.3

    Source code(tar.gz)
    Source code(zip)
  • 8.6.2(Sep 21, 2021)

    New functionality:

    • New glitch filter
    • New swirl filter - note that this filter is not very performant

    Internal changes:

    • Update demos by factoring out common code

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/v8.6.1...8.6.2

    Source code(tar.gz)
    Source code(zip)
  • v8.6.1(Sep 13, 2021)

    New functionality:

    • New vary-channels-by-weights filter - this replicates curveWeights functionality found in 3rd party software such as the Gimp
    • Export the pseudo-random number generator from the scrawl object

    Internal changes:

    • Update demos by factoring out common code

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/8.6.0...v8.6.1

    Source code(tar.gz)
    Source code(zip)
  • 8.6.0(Jul 26, 2021)

    New functionality:

    • Added functionality to allow canvas displays to take into account device screen dpr values, including automated changes when a user drags a browser window between screens with different dpr values. This new functionality is opt-in, to minimise breaking changes with existing SC-based canvas animations and displays. Note that this new functionality has been explicitly deactivated for Safari-based browsers

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/8.5.5...8.6.0

    Source code(tar.gz)
    Source code(zip)
  • 8.5.5(Jul 16, 2021)

    New functionality:

    • New random noise filter
    • New mapToGradient filter
    • Added a Worley noise engine to the noise asset
    • Crescent entity added

    Improvements to:

    • Investigated Lighthouse and made tweaks to the codebase to help improve Lighthouse score
    • Noise asset can now display output using more complex gradients via the 'rainbow gradient' attributes

    Non-breaking bug fixes for:

    • Loom entity bugfix

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/8.5.4...8.5.5

    Source code(tar.gz)
    Source code(zip)
  • 8.5.4(Jun 30, 2021)

    New functionality:

    • Added a new reaction-diffusion asset - to make RD-generated backgrounds accessible to SC Picture entitys and Pattern styles
    • Added a 'stripe' engine to the noise asset

    Improvements to:

    • Rollup configuration tweaks

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/8.5.3...8.5.4

    Source code(tar.gz)
    Source code(zip)
  • 8.5.3(Jun 6, 2021)

    New functionality:

    • Added a new gaussian blur filter - this is significantly faster than the existing blur filter and should be used in preference to the old approach
    • Added a new raw asset - we can use this asset to make third party graphics library functionality accessible to SC Picture entitys and Pattern styles. Tested with: Delaunator (for Delaunay/Voronoi triangulation); Rapier physics engine (via WASM as Rapier is written in Rust); Tensorflow body-pix ML model; MediaPipe selfie-segmentation and face-mesh ML models
    • Linespiral entity added

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/8.5.2...8.5.3

    Source code(tar.gz)
    Source code(zip)
  • 8.5.2(Mar 11, 2021)

    New functionality:

    • Added a new corrode filter
    • Support for conic gradients added

    Improvements to:

    • Work undertaken to make filters code faster

    Internal changes:

    • Entity stamp functionality reconsidered and rewritten

    Non-breaking bug fixes for:

    • Delta animation bugs fixed

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/8.5.1...8.5.2

    Source code(tar.gz)
    Source code(zip)
  • 8.5.1(Feb 26, 2021)

    Improvements to:

    • Develop the 'snippet' concept - this work has been inspired by, but does not replicate, the approach to adding canvas effects and animations to DOM elements contained in the new Houdini Paint API

    Internal changes:

    • The 'component' concept has been renamed to 'snippet' - references to 'component' are deprecated

    Non-breaking bug fixes for:

    • Firefox pattern bug fixed

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/8.5.0...8.5.1

    Source code(tar.gz)
    Source code(zip)
  • 8.5.0(Feb 19, 2021)

    Internal changes:

    • Filters - moved filters code from web worker back into main thread
    • Removed web worker code - this simplifies the code base and makes SC easier to integrate with 3rd party tooling such as code bundlers
    • As web workers have been removed, can also remove the Display cycle promises cascade

    New functionality:

    • Entity caching - this allows entitys with more intense filters applied to them to be rendered internally once, then have the cache image stamped on the display when required

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/8.4.0...8.5.0

    Source code(tar.gz)
    Source code(zip)
  • 8.4.0(Feb 2, 2021)

    Breaking changes to functionality:

    • New filters system written from scratch - this new approach is inspired by the SVG filters approach where a filter effect can be built up using multiple paths
    • The 'user-defined' filter has been deprecated and removed

    New functionality:

    • New filters include area-alpha, blend, channels-to-alpha, clamp-channels, colors-to-alpha, compose, displace, emboss, flood, offset, process-image
    • Added a noise asset (to generate and use perlin, simplex noise)
    • Mesh entity
    • Make fonts measured in viewport units responsive to changes in the viewport dimensions

    Improvements to:

    • Easing functions

    Non-breaking bug fixes for:

    • Fixed a range of issues specific to the Safari browser
    • Fixed a range of issues specific to the Firefox browser

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/8.3.4...8.4.0

    Source code(tar.gz)
    Source code(zip)
  • 8.3.4(Jan 6, 2021)

    New functionality:

    • Added 'clearalpha' attribute to Cells - setting this to values >0 creates a ghosting effect on the display
    • Track mouse movements over 3d rotated and scaled canvas elements

    Non-breaking bug fixes for:

    • Asset kill functionality
    • Cell filter functionality

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/8.3.3...8.3.4

    Source code(tar.gz)
    Source code(zip)
  • 8.3.3(Dec 25, 2020)

  • 8.3.2(Dec 25, 2020)

    New functionality:

    • Cog entity added
    • New entity stamping method - clip - to clip subsequent stamping to within an entity's area

    Non-breaking bug fixes for:

    • Fix Group-based filtering
    • Color parsing

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/8.3.1...8.3.2

    Source code(tar.gz)
    Source code(zip)
  • 8.3.1(Dec 17, 2020)

    New functionality:

    • Color factory ranges

    Improvements to:

    • Enhanced Net and Emitter entity functionality

    Non-breaking bug fixes for:

    • Fix close-to-zero issues

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/8.3.0...8.3.1

    Source code(tar.gz)
    Source code(zip)
  • 8.3.0(Dec 2, 2020)

    New functionality:

    • Added a physics-based particle system to SC
    • New factories for Particle-related objects: World, Force, Spring
    • New factories for Particle-related entitys: Emitter, Net, Tracer
    • New functionality to allow artefacts to pivot themselves with relation to particles

    Non-breaking bug fixes for:

    • Filters system - filterAlpha and filterComposite bugfix

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/8.2.5...8.3.0

    Source code(tar.gz)
    Source code(zip)
  • 8.2.5(Oct 31, 2020)

    New functionality:

    • Non-base Cell wrappers can now have their own 'here' objects
    • Non-base Cell wrappers can now position and animate themselves with reference to other artefacts - pivot, mimic, path
    • Interact with entitys on a non-base Cell - added functionality so that users can drag-drop entitys on these Cells, even when the Cell has been rotated, resized, scaled or flipped
    • Stacks and Canvas wrappers are now aware of their area sizes (smallest, smaller, regular, larger, largest) and can invoke hook functions for each when they change area size

    Non-breaking bug fixes for:

    • Ticker actions minor bugfix
    • Coordinate object minor bugfix
    • Loom entity minor bugfix
    • Oval entity bugfix - was incorrectly calculating its radiusX and radiusY values in certain circumstances
    • Picture entity minor bugfix
    • Polyline entity bugfix - was incorrectly calculating its dimension values in certain circumstances
    • Star entity bugfix - was incorrectly calculating its radii values in certain circumstances
    • Entity state minor bugfix
    • Tetragon entity bugfix - was incorrectly calculating its radiusX and radiusY values in certain circumstances
    • Tween effective time calculation minor bugfix

    Full Changelog: https://github.com/KaliedaRik/Scrawl-canvas/compare/8.2.4...8.2.5

    Source code(tar.gz)
    Source code(zip)
Owner
Rik Roots
I build websites because I love to deliver astonishing experiences to people who visit those websites.
Rik Roots
An animated and accessible command menu

kmenu ?? Animated and accessible cmdk interface Demo 路 NPM 路 Product Hunt 路 StackBlitz 路 CodeSandbox ?? Quickstart Having trouble? Unsure of something

Harsh Singh 474 Jan 4, 2023
Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Mike Skowronek 793 Dec 27, 2022
馃惪 Super easy and lightweight(<3kb) JavaScript animation library

Overview AniX - A super easy and lightweight javascript animation library. AniX is a lightweight and easy-to-use animation library with excellent perf

anonymous namespace 256 Sep 19, 2022
Slickscroll - A Lightweight JavaScript library for quick and painless momentum & parallax scrolling effects.

Slickscroll is a JavaScript library that makes momentum & parallax scrolling quick and painless View Demo: slickscroll.musabhassan.com Momentum Scroll

Musab Hassan 33 Dec 28, 2022
Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility

Animate Plus Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and

Benjamin De Cock 5.9k Jan 2, 2023
A lightweight JavaScript library for creating particles

particles.js A lightweight JavaScript library for creating particles. Demo / Generator Configure, export, and share your particles.js configuration on

Vincent Garreau 26.7k Jan 8, 2023
GreenSock's GSAP JavaScript animation library (including Draggable).

GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani

GreenSock 15.5k Jan 8, 2023
Javascript library to create physics-based animations

Dynamics.js Dynamics.js is a JavaScript library to create physics-based animations To see some demos, check out dynamicsjs.com. Usage Download: GitHub

Michael Villar 7.5k Jan 6, 2023
GreenSock's GSAP JavaScript animation library (including Draggable).

GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani

GreenSock 15.4k Jan 5, 2023
simple JavaScript library to animate texts

Animated Texts Hi, this library is a simple javascript text animator Properties force type: number default: 300 start_delay_time type: number default:

Crist贸v茫o 4 Jan 11, 2022
Nebula is a lightweight (1kb compressed) JavaScript library that creates beautiful universe animations.

Nebula is a lightweight JavaScript library for creating beautiful universe animations. Including configurable Stars, Nebulas, Comets, Planets and Suns. Compatible with SSR

Florian DE LA COMBLE 34 Nov 25, 2022
:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event.

TransitionEnd TransitionEnd is an agnostic and cross-browser library to work with event transitionend. Browser Support 1.0+ 鉁 4.0+ 鉁 10+ 鉁 10.5 鉁 3.2+

Evandro Leopoldino Gon莽alves 95 Dec 21, 2022
馃嵖 A cross-browser library of CSS animations. As easy to use as an easy thing.

Animate.css If you need the old docs - v3.x.x and under - you can find it here. Just-add-water CSS animation Installation Install with npm: npm instal

Animate.css 76.7k Dec 30, 2022
Animation library that mimics CSS keyframes when scrolling.

Why Motus ? Motus allows developers to create beatuful animations that simulate css keyframes and are applied when the user scrolls. Features Node & B

Alexandru Cambose 580 Dec 30, 2022
馃嵖 A cross-browser library of CSS animations. As easy to use as an easy thing.

Animate.css If you need the old docs - v3.x.x and under - you can find it here. Just-add-water CSS animation Installation Install with npm: npm instal

Animate.css 76.7k Jan 4, 2023
A library to add a virtual Trackball to your DOM

Trackball.js - 3D Trackballs for your Website Trackball.js is a small JavaScript library on top of Quaternion.js to enable free 3D rotation of element

Robert Eisele 34 Nov 27, 2022
Theatre.js is an animation library for high-fidelity motion graphics.

Theatre.js is an animation library for high-fidelity motion graphics. It is designed to help you express detailed animation, enabling you to create intricate movement, and convey nuance.

Aria 8.6k Jan 3, 2023
Tiny ANSI terminal coloring library

felt-pen Tiny ANSI terminal coloring library Benchmarks Calling chalk 1,192,251 ops/sec cli-color 130,947 ops/sec ansi-colors 683

nin-jin 15 Aug 7, 2022
Animation Academy teaches you CSS animations using the transition and animation properties.

Animation Academy Open Animation Academy > Contents Background Built With Functionality Feature Highlights Wireframes Features In Development Backgrou

Jacob Benowitz 6 Jun 23, 2022