Show HN: Drawingboard.js
leimi.github.io
leimi.github.io
*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!
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/
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. :-)
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...
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...
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
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...
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.
How would you go about persisting the canvas? json encoded output?
(added snark: how can this work so nicely and bloody OnSwipe and certain websites crash my browser instantly?)
Also...
h1 { font-family: Comic Sans MS; }
Hey, Comic Sans fits perfectly here, don't you think? :)
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.
"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."
Any plan to release a way to export the drawing in a json object (or any other data structure) ?
Props to you anyway.
Sad I didn't stumble upon it a few months ago while I was searching for something like this.