jakubfiala / atrament Goto Github PK
View Code? Open in Web Editor NEWA small JS library for beautiful drawing and handwriting on the HTML Canvas.
Home Page: http://fiala.space/atrament/demo
License: MIT License
A small JS library for beautiful drawing and handwriting on the HTML Canvas.
Home Page: http://fiala.space/atrament/demo
License: MIT License
I have a canvas in a Bootstrap Modal.
Works perfectly well on a PC; Not working on Android phone
Used to work well until Chrome released a new version for Android. (on 18th Oct)
Even now, if canvas placed directly on form, it works. Doesn't work when placed in Modal.
I guess it would be far more useful to have a signature like this
atrament(canvas, options)
where the second parameter is an object with properties corresponding to the publicly available properties on Atrament
instances (according to the docs, that would include weight
, color
, smoothing
, adaptiveStroke
, mode
and opacity
) plus width
and height
(Even if I'd argue that you don't really need these last two. They're easily enough configured through the canvas element itself).
Since a number of Atrament apps seem to target tablets, v4 should be properly tested on these devices, including input methods such as Apple Pencil.
It doesn't look like this exports Atrament as a module. It would make it a lot easier to bundle it using tools like browserify or webpack.
Hi,
I am not sure is this is a bug or not, but when I save a drawing, I cannot open it with the default image viewer of windows (Windows 10). However I can open it with MS paint and others. Therefore I wonder if there is something wrong with the generated image.
I get the image using the toimage()
method and then I use python to save the generated image as:
with open("imageToSave2.png", "wb") as f:
f.write(image_string[22:].decode('base64'))
I have followed this method to save the images generated by other JS drawing libraries, and I can open them with the windows image viewer.
It might be convenient to have a sketchpad open but disable drawing. For example, maybe some users are allowed to draw and others can see the drawing (via syncing the strokes in realtime) but those users should not be able to draw themselves. For example, that could be useful for a virtual blackboard. It'd be nice to set their sketchpad to "disabled" mode. I think this only requires adding the option of "disabled" and no extra code for it, since you're already checking mode on every stroke.
IMHO, giving no width and height at all to atrament
should not reset the dimensions of the canvas
element. It is quite unexpected, not to say irritating.
In case you need the dimensions internally, you should instead read them from the canvas element.
Hi!
I’d like to stream the drawing as it’s being made to other clients. I’m looking for ways to do that.
One way would be to capture the stream of the canvas, and stream it via WebRTC.
Another would be to get real-time information of the drawing (points, colors, etc) and replay the movements on listener devices.
What would be your advice?
Thanks!
This may produce smoother strokes and improve performance, but needs to be tested. I also don't want to do it if it means introducing a 3rd party rendering library.
Hello,
I'm getting unexpected results from my undo implementation. This is how I'm doing it:
1. Initialize (global) empty array of strokes:
let strokes = []
2. When strokerecorded
is fired, push stroke to array:
atrament.addEventListener('strokerecorded', function(obj) {
if (!atrament.recordPaused) {
strokes.push(obj.stroke);
}
});
3. When the undo button is pressed, do the following:
function undoStroke() {
strokes.pop();
atrament.clear();
atrament.recordPaused = true;
for (let stroke of strokes) {
// set drawing options
atrament.mode = stroke.mode;
atrament.weight = stroke.weight;
atrament.smoothing = stroke.smoothing;
atrament.color = stroke.color;
atrament.adaptiveStroke = stroke.adaptiveStroke;
// don't want to modify original data
const points = stroke.points.slice();
const firstPoint = points.shift();
// beginStroke moves the "pen" to the given position and starts the path
atrament.beginStroke(firstPoint.x, firstPoint.y);
let prevPoint = firstPoint;
while (points.length > 0) {
const point = points.shift();
// the `draw` method accepts the current real coordinates
// (i. e. actual cursor position), and the previous processed (filtered)
// position. It returns an object with the current processed position.
const { x, y } = atrament.draw(point.x, point.y, prevPoint.x, prevPoint.y);
// the processed position is the one where the line is actually drawn to
// so we have to store it and pass it to `draw` in the next step
prevPoint = { x, y };
}
// endStroke closes the path
atrament.endStroke(prevPoint.x, prevPoint.y);
}
atrament.recordPaused = false;
}
Notice how after I press undo, the last line disappears, as expected, but the other two lines are extended a little bit.
Can you help me with this?
I'm on Linux. This happens on both Firefox 72.0.1 and Google Chrome 89.0.4389.90.
Thank you for the library!
These include:
force
- should slightly affect stroke weightradiusX|Y
and rotationAngle
- should set stroke weight. I need to find a way to calculate the weight based on the ellipse shape and rotation, possibly adjusting it using the apparent stroke direction (vector based on previous stroke points)MAYBE:
mouseup
event listener on document
, not canvas
i'm not sure where to look so I thought I would post it here. I am using atrament in my app and it works fine in chrome and firefox but in safari its giving me a strange error:
unexpected token '('
at this line:
set(x, y) {
in Point
any ideas?
I can't really screenshot this, but wehen I'm scrolled up the line is right underneath my cursor, and when I scroll down the line is above my cursor.
Edit:
It only happens in device emulator mode.
For the record:
bower install atrament
works)Perhaps good to add to the README!
Easy enough to repro:
Hi, I can't help but notice a difference when using Atrament with and without Inspect Element open on Chrome. It isn't a big issue, but is there a reason for this?
In this picture, the above is written with inspect open, and bottom is without. The above is more rough, and has 0 smoothing lag when writing, where as the version below (the one people will use) behaves properly.
I tried on this website: https://www.fiala.space/atrament.js/demo/
Hi,
I have no idea what is going on, but when I run this code, the range selector stops working in Chrome and Firefox (it works in Edge). By "not working" I mean that in Chrome you cannot deselect the slider, and in firefox you cannot move it. This is the code:
<html>
<head>
<script src="/assets/js/atrament.min.js"></script>
<style>
canvas {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<canvas></canvas>
</body>
<script>
var aaa = atrament('canvas', 200, 200);
</script>
<form>
<input type="range" min="0" max="10">
</form>
</html>
And if I remove the atrament line, then it starts working:
<html>
<head>
<script src="/assets/js/atrament.min.js"></script>
<style>
canvas {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<canvas></canvas>
</body>
</html>
I think this issue does not ocurr with the older version of the library that you use in the demo.
Steps to reproduce:
Tested on Samsung Galaxy S7 and Google Nexus 5 devices.
(As a side note, I couldn't get the demo working at all on Firefox Mobile)
Thank you
http://fiala.space/atrament.js/demo
Uncaught SyntaxError: The requested module '../index.js' does not provide an export named 'default' (at demo.js:2:8)
It should be clarified that Atrament
will never be exposed automatically. From the docs, I expected it to be in global scope, when including atrament.min.js
.
Do not get me wrong though, I think it is good that there is only one global. This is just about clear documentation.
Hi,
Thank you for very nice library. I'm really excited to use it in my project.
Do you consider adding FILL as a third mode? I think it could be very useful
Thank,
Pavlo
Bug on Edge Browser: If I click on color input area and change to a new color, and immediately I go to draw, when I release the mouse the color picker opens again, I draw and when I release mouse, the color picker opens again, this happens on Microsoft Edge Browser
First off - great stuff. Thank you!
I am having trouble on using atrament.js on an iPad Pro with Apple Pencil. While writing the wrist-detection seems to have some difficulties during the way so a moosdown is simulated where my wrist is again and again. So when I write a sentence I get like 10 straight strokes on my canvas.
I guess some kind of test has to be run if the new mouseDown is done before an mouseUp is triggered and ignore that in that case.
Best
Jonas
I'm not sure if this is a bug or a feature, but the canvas does not handle resizing on its own. In particular, because the strokes are saved with absolute x/y coordinates, you have to be careful when you repaint the canvas that the size of the original canvas was the same as the size of the current canvas. I suggest saving the points in strokes always to a canvas of a uniform (large) size, then having the repaint function (.draw or .beginStroke, etc.) adjust for the size of the canvas.
Again, this might be the intended behavior (and once I realized what was happening, it wasn't a big deal to fix it in my own project), but I think it would be a nice feature if an atrament sketchpad could auto-resize when the underlying canvas was resized.
We're a group of students looking for a drawing library to use for a game we're making, and we love Atrament, but we need something that will save the drawing on a transparent background so we don't have the white square of canvas. I didn't know if there was a way to do that using Atrament, but thought I'd ask.
I can't seem to figure out what is causing this, as it doesn't always happen. Sometimes when I draw on the canvas, when I let the mouse up, I get an extra straight line from the end point of the stroke to the beginning point of the stroke. I'm not 100% sure it's a bug. I could have implemented atrament wrong, but I can't seem to find it. Also, it's not saving that extra line to the stroke because if I hit "undo", it removes all of the extra lines from however many past strokes have had it.
Any help would be very appreciated. TIA
https://user-images.githubusercontent.com/39074364/114517894-639d7d80-9c04-11eb-9e13-1a591bbb74c8.mov
atramentfunctions.txt
v4 should be bundled with Rollup and only support modern browsers (definition of what that means TBA)
It would be nice to have an indicator if anything has been drawn by the user yet. Of course needs to be reset to false
when the user clears the canvas.
The code style is a bit messy and inconsistent here and there. Let's add eslint
and implement a standard.
@jakubfiala feel free to assign this to me, I'll take it up sometime soon.
opacity does not work on demo!
strokerecorded event fires up only on mouseup. Is there an event that gives me real time draw data?
Need to test this, but the following approach might really enhance UX of the fill mode.
ImageData
to a WWImageData
, we use drawImage
to render it as it's a lot faster.I'd say this should be pretty high priority as it's a major UX improvement especially for using atrament canvas in a larger app with lots of other UI.
Libraries like fabric.js and paper.js have a toJSON() to extract canvas data as JSON. Do you plan to implement it?
If I get some time I'll run some profiling to see what's happening. When you change to fill mode in Chrome it will lock up the browser. It's not real evident but in the gif after it locks (shows spinner) I'm trying to click the controls, slide the range inputs with no responsiveness.
Great little lib by the way 👍
Hey @jakubfiala,
Thanks for the great library - definitely the most realistic canvas drawing package I've come across.
I am working with another developer to export the canvas data created by Atrament to an SVG. We've achieved this by listening to the "stroke recorded" event and using the returned data to re-draw the image onto a specialised canvas provided by https://github.com/gliffy/canvas2svg, which can then be exported as an SVG.
It all works well except that the final SVG does not have the smoothing effect applied. Therefore, it does not look anywhere as good as the Atrament canvas drawing.
We think we could fix this by forking canvas2svg and integrating the smoothing functions of Atrament... Would this work? Do you have any other suggestions as to how we can apply the smoothing effect to the programmatically re-created SVG?
If we can get it working we can also integrate it as an API method of Atrament if this is a feature you'd want. Thanks!
Hi,
Sorry if this is the wrong way to do it, I'm not used to Github issues.
I tried using your library, but I'm getting an UncaughtReferenceError: 'Atrament' not defined
error and I'm not sure what I'm doing wrong.
I link it in < head > tag as your code saved in my own file, then I do the syntax from the documentation. Am I missing a dependency?
My repo is at https://keybase.pub/mgnica/website/ and the page using it is https://mgnica.keybase.pub/website/you.html for reference.
Great library, when I use it with mouse it's perfect. But when I use it with Touch, the line doesn't appear right where the finger presses, it appears below, but quite a bit below, which is very odd, why is the line not appearing right where the finger presses? I'm using Chrome browser in both Desktop PC and Android phone, same problem in both, latest versions of all
best wishes
As the title says.
When I move my mouse slowly the line is very thin, but when I move it faster it becomes HUGE! How can I fix this?
I tried to change the drawing mode to sketcher.mode = 'erase'
- does not seem to work in the new version.
Its also not working in your demo anymore: http://fiala.uk/atrament.js/demo/
I mean this:
document.addEventListener('mouseup', mouseUp);
If something is happening outside of canvas (for example button clicking) it should not have any side effects for canvas, but it has currently. It's just a bad behaviour. Don't you agree?
I was playing with your demopage - http://fiala.uk/atrament.js/demo/ - and noticed that when I try to draw lines quickly (e.g. I tried to draw a horizontal line quickly from one side canvas to another) the line stops after around only 100px or so.
I am trying to save the canvas along with its background color and use it elsewhere to prepare a collage. But, I only get to see a black background. Any help to get this resolved greatly appreciated.
Regards
The demo link no longer works. It goes to your homepage instead of the atrament demo.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.