kaliedarik / scrawl-canvas Goto Github PK

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

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.

Hello, as a beginner of scrawl-canvas, I wonder if it's possible to resize mycanvas according to the size of img which is dynamicly changing.
I tried to cover a canvas on an img, always fitting in the img size, and then I can make notes on different imgs. The problem is, once imported scrawl module and set that canvas tag as "data-scrawl-canvas", there seems an initial setting for that with {width:0;height:0;display:block;} in inline styles, which makes it hard to override by further javascripts.
Besides, each time when the makeRender() calls, such initial setting will guarantee above settings being reset again, which means if I want to do something with scrawl, I have to abandon the idea of dynamicly resizing mycanvas with Javascript.
Am I use it a wrong way? Thanks!
Here is the basic Html to show the relation of "note" canvas and the dynamicly-changing "background" img
<div class="img_wrapper" > <img src="" alt="" > <canvas id="mycanvas" data-scrawl-canvas ></canvas> </div>

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

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!

How to update source of a frame?

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.

hi
thanks for your work on this library! i'm not sure if i'm missing something or if i've found a bug:
when i put a block with an anchor on my canvas, the anchor tag is added to the canvas nav.
when I put an image with an anchor on my canvas, the anchor tag is added to the default nav.
is this a bug or the intended behavior? how could i get the anchor tag of the image in the canvas nav?

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.

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,
            });

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!

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