Just noticed this comment in the code:<p>*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<p>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.<p>For those of you who are curious about other projects out there that offer similar functionality, take a look at these:<p><a href="http://www.createjs.com/#!/EaselJS/demos/drawing" rel="nofollow">http://www.createjs.com/#!/EaselJS/demos/drawing</a><p><a href="http://fabricjs.com/freedrawing/" rel="nofollow">http://fabricjs.com/freedrawing/</a><p><a href="https://github.com/SketchIO/Sketch.js" rel="nofollow">https://github.com/SketchIO/Sketch.js</a><p><a href="https://github.com/literallycanvas/literallycanvas" rel="nofollow">https://github.com/literallycanvas/literallycanvas</a>
Nice! Leimi - you should check out my project xBoard: <a href="https://github.com/eipark/xboard" rel="nofollow">https://github.com/eipark/xboard</a>. 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 <a href="http://www.wysp.ws/practice/course/1057894/" rel="nofollow">http://www.wysp.ws/practice/course/1057894/</a> -- it's meant for painting so the functionality is a bit different, you control opacity)<p>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.<p>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.<p><a href="http://demo.rocketlease.com/site_media/signature-pad/examples/draw-smoothed-vs-linear.html" rel="nofollow">http://demo.rocketlease.com/site_media/signature-pad/example...</a>
Looks great. Would be interesting to add to blogging software to allow a quick sketch to be added to a post.<p>How would you go about persisting the canvas? json encoded output?
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...
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.<p>Also...<p><pre><code> h1 { font-family: Comic Sans MS; }
</code></pre>
Seriously?
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.
Had quite a laugh at enlargeYourContainer.<p>Any plan to release a way to export the drawing in a json object (or any other data structure) ?<p>Props to you anyway.