Comments (4)
@oyuntuayC thank you for reporting the issue! I believe I know what's going on here - the fact that manually doing a clearRect
works was a great hint. The clear()
method currently returns early if #dirty
is false. This was to avoid running all the subsequent code if the canvas is already "clean" (i.e. empty).
However, I now see how this could lead to issues like yours. Atrament currently toggles #dirty
only when the pointer has moved. This code doesn't run when drawing programmatically, because no pointermove
event fires. I would like to solve this by doing two things:
clear()
should always clear the canvas, regardless of the value of#dirty
. I think this is more predictable behaviour, especially since applications might draw other non-Atrament stuff onto the canvas, and as a user of the library I'd expect that stuff to be cleared, too.#dirty
should be set totrue
in thedraw()
method, rather than in#pointerMove
. That way, it will also be true if only programmatic drawing has been performed.
I'll make these changes and release them in v4.1.0, hopefully today or tomorrow.
from atrament.
@oyuntuayC a fix to this has now been published in v4.1.0 - please do let me know if you encounter any other issues!
from atrament.
I found this part in the code, maybe it's related
clear() {
if (!this.#dirty) {
return;
}
this.#dirty = false;
this.dispatchEvent('clean');
from atrament.
and by getting context and clear it manually it works,
const ctx = canvas.getContext("2d")
ctx.clearRect(-10, -10, 1000 + 20, 500 + 20);
from atrament.
Related Issues (20)
- Add a "disable" option for drawing mode. HOT 1
- How to retain smoothing effect in SVG when programmatically creating SVG from stroke data HOT 2
- Sometimes drawing adds a line between beginning and end of stroke HOT 1
- Undo implementation HOT 5
- question about layers/transparency HOT 2
- Realtime draw updates HOT 4
- Different behavior when Inspect Element is open on Chrome HOT 4
- Online Demo Error HOT 1
- Bundle with Rollup HOT 1
- Test rendering with WebGL HOT 1
- QA with iPad + Apple Pencil and a similar Android tablet HOT 2
- Add support for advanced `Touch` properties HOT 1
- Adaptive stroke causes flood fill artifacts HOT 2
- Fix demo link in readme HOT 1
- Just add some text labelling for drawings HOT 3
- Click creates a line in top left corner HOT 1
- Diagonal line from top left
- Bundling Atrament with vite shows warning: HOT 5
- Bundle Fill worker as separate package
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ššš
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ā¤ļø Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from atrament.