jakubfiala / atrament Goto Github PK

View Code? Open in Web Editor NEW

1.5K 1.5K 114.0 1.13 MB

A small JS library for beautiful drawing and handwriting on the HTML Canvas.

Home Page: http://fiala.space/atrament/demo

License: MIT License

JavaScript 100.00%

drawing graphics html-canvas javascript

atrament's People

Contributors

Stargazers

Watchers

Forkers

adhbh jdiderik kora731 javascriptcollection yomigits 6174 mtarapata elykahn frankie-666 tony-- jaw-drop techscientist okusnadi ptkach amitabhaghosh197 adon988 a1ip alvarlaigna womol narmatoff umarmughal abell123456 uippet david43 chrisemoulton sqaiyan webxinren ycohio kkac trunow jordyvandomselaar zengsuyi rubenstolk mohsinraza lingtal-fork rickvila jacksbox winprog eidellev krisbot2000 oksanaharris fzydesign yukyco pedoc larmaysee benjirez martinwithyou mgesmundo rubenanton90 gmanfredax metoin domchey simonhallstroem hhy5277 miracle-liu johnmwirigimahugu rodrigowbazevedo flameltc ningbnii himmatong brkkyk dethe youshengyouse samsgates zhp1254 banben panxulo r1ssophiefehu namemeia salehy1981 hezuogongying elena-hub joqqy xman086 libin1991 awen1988 salmanghumsani skacperski pineapple45 future-cyborg lxngoddess5321 uriberto tiepntt mbaralle xuezheyoushi taroyuyu bunkerbewohner lampn9397 emilycmccarthy shushuitie2017 opensource05 mainiwaer 521hellogithub panglesd nu2 motionguided ashley2014 tahirramzan profispojka lmjh

atrament's Issues

range input broken when using the library?

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.

Library should not add event listener on document

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?

saving and opening a drawing

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.

question about layers/transparency

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.

Problems with hand-down on iPad with apple pencil

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

Unable to save the canvas background color.

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

beginDrawing/stopDrawing do not record mouse positions

https://github.com/jakubfiala/atrament.js/blob/59d3e6767b0b27e555c215e906993a616ea1d408/src/atrament.js#L151

How to retain smoothing effect in SVG when programmatically creating SVG from stroke data

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!

Bug on Edge Browser, after changing to a new color, and then drawing, the color picker opens when mouse is released

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

Using 'fill' tool on a section that is already filled crashes browser tab

Easy enough to repro:

Open demo at http://fiala.uk/atrament.js/demo/
Select 'fill' tool
Fill the canvas by clicking on the page
Fill again by clicking on the page
Notice the crash!

Different behavior when Inspect Element is open on Chrome

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/

mouse position is not recorded on mouseup, so replaying or undoing strokes dosent' work.

https://github.com/jakubfiala/atrament.js/blob/59d3e6767b0b27e555c215e906993a616ea1d408/src/atrament.js#L93

Demo: Fill mode locks up browser (Chome & Firefox tested)

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 👍

Do not reset canvas size to 500x500

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.

Undo/redo

Would really appreciate an undo/redo feature.

I guess that in order for this to work, we need to

save snapshots of the canvas, (example) or
save objects / user actions in an array and redraw canvas. (example)

Any thoughts? Any volunteers? 😃

export as module

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.

opacity does not work

opacity does not work on demo!

UncaughtReferenceError: 'Atrament' not defined

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.

Demo link

The demo link no longer works. It goes to your homepage instead of the atrament demo.

Realtime draw updates

strokerecorded event fires up only on mouseup. Is there an event that gives me real time draw data?

Bundle with Rollup

v4 should be bundled with Rollup and only support modern browsers (definition of what that means TBA)

Accept options object in constructor

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).

with Touch, line is away from where finger presses

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

Erase does not work

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/

Ability to destroy (unlisten events)

Clarify how to access Atrament class

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.

Add new mode

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

Add a "disable" option for drawing mode.

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.

Stream the canvas as the drawing is made

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!

Add support for advanced `Touch` properties

These include:

force - should slightly affect stroke weight
radiusX|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:

WebKit's own force events https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/RespondingtoForceTouchEventsfromJavaScript.html

Test rendering with WebGL

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.

When moving mouse fast the line becomes humongous

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?

chore: eslint

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.

Canvas doesn't track quick click and drags

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.

"is dirty" check

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.

When moving outside the canvas and mouseup, drawing still continues

Set the mouseup event listener on document, not canvas

How do I export/import canvas data to/from JSON?

Libraries like fabric.js and paper.js have a toJSON() to extract canvas data as JSON. Do you plan to implement it?

QA with iPad + Apple Pencil and a similar Android tablet

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.

unexpected token '('

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?

Use a WebWorker for fill mode

Need to test this, but the following approach might really enhance UX of the fill mode.

initiate filling, show loading cursor, block drawing until step 5
send the ImageData to a WW
let the WW fill the appropriate pixels while the user revels in their unblocked UI
WW sends back ImageData, we use drawImage to render it as it's a lot faster.
stop filling, unblock drawing, have fun

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.

When scrolling down the line is above the cursor

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.

Save strokes with uniform sizes

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.

Fill bucket doesn't work on mobile chrome

Steps to reproduce:

Open the demo at http://fiala.uk/atrament.js/demo/ on chrome mobile
Try to use the fill mode, either applied to the whole picture, or to a region delimited by a stroke. Nothing happens.

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

Single input is sometimes ignorned

If you want to draw a single dot, then sometime the input get's ignored. (maybe because mousemove doesnt trigger?) See the attachment for a screen grab.

Browsers affected: Chrome, Firefox, MS edge

Undo implementation

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

But this is what I get:

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!

Good stuff!

For the record:

I registered atrament with bower (so bower install atrament works)
I created a Polymer wrapper element: https://github.com/safetychanger/sc-atrament

Perhaps good to add to the README!

Online Demo Error

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)

Unable to draw on Android Chrome Browser

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.

Is there an option to save or convert the drawing in SVG format?

Sometimes drawing adds a line between beginning and end of stroke

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