Show HN: Drawingboard.js(leimi.github.io)
leimi.github.io
Show HN: Drawingboard.js
http://leimi.github.io/drawingboard.js/
64 comments
Is there any sort of smoothing going on? the rendered curve looks really slick and super nice.
I had some trouble with making signatures look nice on a library I used (mouse drawn signatures looked really choppy and jagged) so I had to do a little work to make it smooth itself out.
http://demo.rocketlease.com/site_media/signature-pad/example...
I had some trouble with making signatures look nice on a library I used (mouse drawn signatures looked really choppy and jagged) so I had to do a little work to make it smooth itself out.
http://demo.rocketlease.com/site_media/signature-pad/example...
Yeah, there is smoothing of a sort.
Most of these kind of drawing boards will take the current mouse position as it moves (x,y), and drop down a pixel or circle onto the canvas at that point.
The smoothness you see here is that instead of just dropping down a point at each mouse coordinate, it creates a canvas path and simply adds a new point into the path and uses a quadratic curve between each point to do the smoothing. Effect does look pretty nice.
The code for doing this is a simple 4 lines, and is seen here: https://github.com/Leimi/drawingboard.js/blob/master/js/boar...
EDIT: For a bit more detail on how this differs from your link: your link is attempting to do the same, but is using javascript calculations to do the work rather than relying on the underlying browser implementation. This is why you see it only apply the smoothing when you stop drawing - the javascript would probably be too slow to run this in real time. Basically it comes down to your link using ctx.lineTo and this drawingboard using ctx.quadraticCurveTo
Most of these kind of drawing boards will take the current mouse position as it moves (x,y), and drop down a pixel or circle onto the canvas at that point.
The smoothness you see here is that instead of just dropping down a point at each mouse coordinate, it creates a canvas path and simply adds a new point into the path and uses a quadratic curve between each point to do the smoothing. Effect does look pretty nice.
The code for doing this is a simple 4 lines, and is seen here: https://github.com/Leimi/drawingboard.js/blob/master/js/boar...
EDIT: For a bit more detail on how this differs from your link: your link is attempting to do the same, but is using javascript calculations to do the work rather than relying on the underlying browser implementation. This is why you see it only apply the smoothing when you stop drawing - the javascript would probably be too slow to run this in real time. Basically it comes down to your link using ctx.lineTo and this drawingboard using ctx.quadraticCurveTo
Thanks, FWIW the link I linked to was an implementation I did a week or so ago.
I'm actually using a similar browser based curve implementation (I'm using the bezier rendering thing instead of a quadratic) -- https://github.com/ezl/signature-pad/blob/master/jquery.sign...
The first pad is the original that just draws lines between the sampled points.
The second 2 actually take points and compute a cubic spline that runs through all the sampled points. The problem I have though is that it takes 4 points to compute a bezier curve, which means there are at least 4 sampled points worth of lag in determining what curve to render on the canvas.
For example, 4 sampled points on a line should render a totally linear segment between the points, but then if the 5th points goes off the line, it actually impacts the preceding points -- so you have to lag even further to make draw the right curve.
Even if you wait every 3 points to determine a quadratic that canvas's built-in can render, it creates some lag between the current mouse position and the rendered curve.
If you keep rendering quadratics every 3 points, you'll get funny cusps where you join each of the quadratics (solution seemed to me to compute the spline for the fully determined segments of the curve).
My janky solution is "draw linear segments until I have enough data, then restroke it with pretty curves". I didn't really understand the full implementation under the "responsiveness" section on Square's blog post here http://corner.squareup.com/2012/07/smoother-signatures.html so I glossed over it since it wasn't super critical.
But then when I saw this link, I couldn't help but think -- oh man, that's sexy...
I'm actually using a similar browser based curve implementation (I'm using the bezier rendering thing instead of a quadratic) -- https://github.com/ezl/signature-pad/blob/master/jquery.sign...
The first pad is the original that just draws lines between the sampled points.
The second 2 actually take points and compute a cubic spline that runs through all the sampled points. The problem I have though is that it takes 4 points to compute a bezier curve, which means there are at least 4 sampled points worth of lag in determining what curve to render on the canvas.
For example, 4 sampled points on a line should render a totally linear segment between the points, but then if the 5th points goes off the line, it actually impacts the preceding points -- so you have to lag even further to make draw the right curve.
Even if you wait every 3 points to determine a quadratic that canvas's built-in can render, it creates some lag between the current mouse position and the rendered curve.
If you keep rendering quadratics every 3 points, you'll get funny cusps where you join each of the quadratics (solution seemed to me to compute the spline for the fully determined segments of the curve).
My janky solution is "draw linear segments until I have enough data, then restroke it with pretty curves". I didn't really understand the full implementation under the "responsiveness" section on Square's blog post here http://corner.squareup.com/2012/07/smoother-signatures.html so I glossed over it since it wasn't super critical.
But then when I saw this link, I couldn't help but think -- oh man, that's sexy...
As it happens, I'm working on something like this right now...
My current best solution is to use mouse/pen movement as cspline sample points, even when not drawing. The motion as you swing into a curve, even before the pen touches down, often predicts the trajectory of the pen stroke. (This also lets you "swing in" a circle without getting ugly linear segments).
This may be of limited utility on a touch-based device, however.
My current best solution is to use mouse/pen movement as cspline sample points, even when not drawing. The motion as you swing into a curve, even before the pen touches down, often predicts the trajectory of the pen stroke. (This also lets you "swing in" a circle without getting ugly linear segments).
This may be of limited utility on a touch-based device, however.
This doesn't keep track of my cursor when I'm outside the boundary of the canvas. Are you listening to mousemove on the canvas element? If so, you might want to move that to the window or document, so you can keep track of the user's mouse even when its not moving in the canvas.
I have a Wacom tablet that I routinely use for sketches. The only problem I always have is that most applications have trouble recognizing the eraser tip. I think Wacom has some sort of web plugin that comes with the driver when you install the table. Any chance of adding that style of tablet input?
Nice Leimi! Great API. If anyone is looking for a similar but hosted solution, give vinci.io a try. You can turn off any tools you don't need and leave the drawing tools enabled.
Been there done that:
http://wpaint.websanova.com
http://wpaint.websanova.com
Nice! This is actually a lot better than the drawingboard!
Sad I didn't stumble upon it a few months ago while I was searching for something like this.
Sad I didn't stumble upon it a few months ago while I was searching for something like this.
It would be awesome a tool like this, but with collaboration enabled (multiples drawers in different machines) !!
This is a nice app. Is there a way to allow multiple people to work together on the same whiteboard?
Works perfectly in HTC Desire S. Thanks.
the real world example using it is priceless.
Looks great. Would be interesting to add to blogging software to allow a quick sketch to be added to a post.
How would you go about persisting the canvas? json encoded output?
How would you go about persisting the canvas? json encoded output?
Thanks!
By default the base64 string of the canvas image is stored in session storage to make the canvas persistent.
I don't have my phone with me right now. Can anybody confirm if this works on iOS? I'm asking because I'm looking for an HTML5 drawing script which works on mobile browsers.
It only supports one finger at a time, but it works well then.
Worked nicely and snappily on an iPad 1 iOS 5.
(added snark: how can this work so nicely and bloody OnSwipe and certain websites crash my browser instantly?)
(added snark: how can this work so nicely and bloody OnSwipe and certain websites crash my browser instantly?)
Only the first canvas works on Android Stock Browser.
Yep. Pretty snappy in iOS7 at least.
Works great on iOS 5.
First thing I thought of with this was creating a mobile app that would be a cloud based instant note taking tool. Preferably used with a stylus.
I think the tool you are looking for is http://scri.ch/
Seems to perform quite well, though the fill tool is a bit useless thanks to the antialiasing on the lines that can't be turned off. Considering the simple approach of this, I'd either remove the AA (or make it togglable) or get rid of the fill tool.
Also...
Also...
h1 { font-family: Comic Sans MS; }
Yeah there's still a bit of work to do on the paint can.
Hey, Comic Sans fits perfectly here, don't you think? :)
Hey, Comic Sans fits perfectly here, don't you think? :)
This is a lovely program and yes, Comic Sans fits 100% perfectly :) haters gonna hate!
If you want a "casual" font then I'd recommend something that looks more like your logo or just looks more like marker/drawing board text in general. Fontsquirrel should serve your needs well.
Also, I'd recommend you to redo the logo digitally so you can overlay it on the background seamlessly - the mismatched grids look pretty ugly right now.
Also, I'd recommend you to redo the logo digitally so you can overlay it on the background seamlessly - the mismatched grids look pretty ugly right now.
always reminded of the piece where comic-sans defends itself. curses a lot for a font, but is pretty funny.
"People love me. Why? Because I’m fun. I’m the life of the party. I bring levity to any situation. Need to soften the blow of a harsh message about restroom etiquette? SLAM. There I am. Need to spice up the directions to your graduation party? WHAM. There again. Need to convey your fun-loving, approachable nature on your business’ website? SMACK. Like daffodils in motherfucking spring."
http://www.mcsweeneys.net/articles/im-comic-sans-asshole
"People love me. Why? Because I’m fun. I’m the life of the party. I bring levity to any situation. Need to soften the blow of a harsh message about restroom etiquette? SLAM. There I am. Need to spice up the directions to your graduation party? WHAM. There again. Need to convey your fun-loving, approachable nature on your business’ website? SMACK. Like daffodils in motherfucking spring."
http://www.mcsweeneys.net/articles/im-comic-sans-asshole
Did you really need to inspect to tell? :P
If I just click with the brush tool, only a semi-circle appears on the canvas. I would expect it to place a full circle.
Really really nice, thanks for releasing. Anybody tried it with Zepto yet instead of jQuery?
Nice! Leimi - you should check out my project xBoard: https://github.com/eipark/xboard. It is somewhat similar, but focuses more on making the drawing canvas 'video'-like with a scrubber and recording functions. You should fork or pull pieces from it if you'd like that sort of functionality.
The video-like thing is indeed really cool - remembers me http://sketchtoy.com/ a lot.
The drawing board logo is a pretty fun easter egg-type-thing.
Oh wow, that's fun, I'm going to make everything drawable from now on! (but seriously, there's a children & technology centre website I will put this on :) :) )
Had quite a laugh at enlargeYourContainer.
Any plan to release a way to export the drawing in a json object (or any other data structure) ?
Props to you anyway.
Any plan to release a way to export the drawing in a json object (or any other data structure) ?
Props to you anyway.
Just noticed this comment in the code:
*droppable: true or false (false by default). If true, dropping an image on the canvas will include it and allow you to draw on it
That's awesome! I was thinking that this would make a great coloring book, and being able to just drop lineart into the back of a canvas and have your kid go to town is awesome. Really nice work, Leimi!
*droppable: true or false (false by default). If true, dropping an image on the canvas will include it and allow you to draw on it
That's awesome! I was thinking that this would make a great coloring book, and being able to just drop lineart into the back of a canvas and have your kid go to town is awesome. Really nice work, Leimi!
Are we really bringing back OekakiBBS? I'm totally ok with this.
This + WebRTC == win.
And even working smoothly on touch devices, well done!
Sweet! I am building an app that can use this to take a customer signature. The app will be using a tablet and stylus to make sales on the floor. Been debating a feature like this.
This is one of the slickest implementation of a sketching app I've seen. The API is nice and the controls are self-explanatory. I've been working on a drawing app for the past few months (journeyship.com) and I'm considering replacing the main canvas with a sketching pad like this one.
For those of you who are curious about other projects out there that offer similar functionality, take a look at these:
http://www.createjs.com/#!/EaselJS/demos/drawing
http://fabricjs.com/freedrawing/
https://github.com/SketchIO/Sketch.js
https://github.com/literallycanvas/literallycanvas
For those of you who are curious about other projects out there that offer similar functionality, take a look at these:
http://www.createjs.com/#!/EaselJS/demos/drawing
http://fabricjs.com/freedrawing/
https://github.com/SketchIO/Sketch.js
https://github.com/literallycanvas/literallycanvas
Oh, never stumbled upon literallycanvas - it's cool! Don't know if I'd have made drawingboard.js if I knew it on the first place.
Hi, I wrote half of Literally Canvas. It looks like we have a lot of overlap, but nice job on the fill and save features. We never got to those. It also looks like you're smoothing your lines, also very good.
I feel like we got "scooped" a bit with this, but at the same time we haven't worked on it in months, so congrats. :-)
I feel like we got "scooped" a bit with this, but at the same time we haven't worked on it in months, so congrats. :-)
I just wanted to say that I was pleasantly surprised that this works so well with Chrome on my Android phone.
Oh, nice sharing, I hope I try your JS script right know !
This would be great in etherpad lite!
I did comment to say that it works well on iPad, but I would like to add that there are some interesting 'features' when using 2 fingers: they don't work at the same time,but on one board, it's almost like an etchasketch where one finger takes over from where the other left off, on another board it draws between the the fingers, and yet another board the draw point switches between where each finger is. Looks like fun to explore later...
Simple and working just as fine. Well done.
A difficulty I had was to make the lines smooth whereas the cursor positions are not sampled very fast by the browser. I'm curious as to what your approach was, since everything seems perfectly smooth. I'll be reading your code...