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.
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.
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.
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.
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."
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.
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 :) :) )
*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!
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:
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 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...
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.
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...
64 comments
[ 4.2 ms ] story [ 136 ms ] threadHow 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...
Seriously?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."
http://www.mcsweeneys.net/articles/im-comic-sans-asshole
Any plan to release a way to export the drawing in a json object (or any other data structure) ?
Props to you anyway.
*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/
https://github.com/SketchIO/Sketch.js
https://github.com/literallycanvas/literallycanvas
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...