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.
Show HN: Drawingboard.js
41–50 of 65 posts
Re: Show HN: Drawingboard.js
#42Looks 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?
Thanks! By default the base64 string of the canvas image is stored in session storage to make the canvas persistent.
How is it stored when using the undo/redo buttons?
Re: Show HN: Drawingboard.js
#43It would be awesome a tool like this, but with collaboration enabled (multiples drawers in different machines) !!
Re: Show HN: Drawingboard.js
#44Seems 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?
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."
Re: Show HN: Drawingboard.js
#45Looks 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?
Thanks! By default the base64 string of the canvas image is stored in session storage to make the canvas persistent.
Leimi, any simple way to use a base64 image as background?
Re: Show HN: Drawingboard.js
#46I 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...
Re: Show HN: Drawingboard.js
#47This is a nice app. Is there a way to allow multiple people to work together on the same whiteboard?
Re: Show HN: Drawingboard.js
#48Is 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...
Re: Show HN: Drawingboard.js
#49Is 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...
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...
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
Re: Show HN: Drawingboard.js
#50Is 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...
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 smoot…
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...
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...