

Show HN: Drawingboard.js - Leimi
http://leimi.github.io/drawingboard.js/

======
emhart
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!

------
ollerac
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://www.createjs.com/#!/EaselJS/demos/drawing)

[http://fabricjs.com/freedrawing/](http://fabricjs.com/freedrawing/)

[https://github.com/SketchIO/Sketch.js](https://github.com/SketchIO/Sketch.js)

[https://github.com/literallycanvas/literallycanvas](https://github.com/literallycanvas/literallycanvas)

~~~
Leimi
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.

~~~
stevejohnson
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. :-)

------
ernestipark
Nice! Leimi - you should check out my project xBoard:
[https://github.com/eipark/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.

~~~
Leimi
The video-like thing is indeed really cool - remembers me
[http://sketchtoy.com/](http://sketchtoy.com/) a lot.

------
fchollet
I made something similar for a webapp of mine (demo at
[http://www.wysp.ws/practice/course/1057894/](http://www.wysp.ws/practice/course/1057894/)
\-- it's meant for painting so the functionality is a bit different, you
control opacity)

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

------
ezl
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...](http://demo.rocketlease.com/site_media/signature-
pad/examples/draw-smoothed-vs-linear.html)

~~~
RyanZAG
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...](https://github.com/Leimi/drawingboard.js/blob/master/js/board.js#L557)

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

~~~
ezl
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...](https://github.com/ezl/signature-
pad/blob/master/jquery.signaturepad.js#L787,790)

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](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...

~~~
jjs
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.

------
lukeholder
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?

~~~
Leimi
Thanks! By default the base64 string of the canvas image is stored in session
storage to make the canvas persistent.

~~~
jonas_b
Leimi, any simple way to use a base64 image as background?

~~~
Leimi
you can set a `background` option when creating a drawingboard - if I did
things well, setting it as the base64 string should do it!

~~~
jonas_b
Thanks, it works!

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

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

~~~
cheeaun
Yeap, works. Tested on iOS mobile safari here.

~~~
jonas_b
Sweet, this looks extremely promising!

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

------
GrinningFool
The drawing board logo is a pretty fun easter egg-type-thing.

~~~
tripzilch
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
:) :) )

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

~~~
bpierre
I think the tool you are looking for is [http://scri.ch/](http://scri.ch/)

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

    
    
        h1 { font-family: Comic Sans MS; }
    

Seriously?

~~~
Leimi
Yeah there's still a bit of work to do on the paint can.

Hey, Comic Sans fits perfectly here, don't you think? :)

~~~
graue
I imagine Comic Sans fits, but you may want to include a fallback to sans-
serif for non-Windows users. I'm getting the default _serif_ font, which is
not a great match.

~~~
Leimi
Oops, you're right!

------
KenoFischer
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?

------
hansc
Remark: The download results in an extension-less format. Which format is it?

~~~
uptown
It's a PNG

------
saltyknuckles
Are we really bringing back OekakiBBS? I'm totally ok with this.

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

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

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

------
debacle
I like the simplicity and configurability. Excellent job.

~~~
Leimi
Thanks!

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

------
rduchnik
Been there done that:

[http://wpaint.websanova.com](http://wpaint.websanova.com)

~~~
Leimi
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.

------
jhonnycano
It would be awesome a tool like this, but with collaboration enabled
(multiples drawers in different machines) !!

------
cbhl
I just wanted to say that I was pleasantly surprised that this works so well
with Chrome on my Android phone.

------
digitalsushi
This is a nice app. Is there a way to allow multiple people to work together
on the same whiteboard?

------
therealunreal
This would be great in etherpad lite!

------
splatcollision
Really really nice, thanks for releasing. Anybody tried it with Zepto yet
instead of jQuery?

------
keyle
.be is Belgian, not French ;)

~~~
Leimi
The .be is actually here for a play on words on the french sentence "j'ai une
grosse teube", "teube" meaning... what it means.

------
evenstood
Oh, nice sharing, I hope I try your JS script right know !

------
jpmatz
And even working smoothly on touch devices, well done!

------
talles
Simple and working just as fine. Well done.

------
scriptstar
Works perfectly in HTC Desire S. Thanks.

------
Beltiras
This + WebRTC == win.

------
goshx
the real world example using it is priceless.

