*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!
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:
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. :-)
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.
I made something similar for a webapp of mine (demo at 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...
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.
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.
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
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.
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 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.
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...
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 :) :) )
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.
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.
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.
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."
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.
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.
*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!