Live data from Hacker News

Show HN: Drawingboard.js

leimi.github.io

51–60 of 65 posts

Re: Show HN: Drawingboard.js

#52
post #45
post #8

Earlier quoted context omitted.

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?

you can set a `background` option when creating a drawingboard - if I did things well, setting it as the base64 string should do it!

Re: Show HN: Drawingboard.js

#53

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.

The video-like thing is indeed really cool - remembers me http://sketchtoy.com/ a lot.

Re: Show HN: Drawingboard.js

#54
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?

Re: Show HN: Drawingboard.js

#56
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.

Re: Show HN: Drawingboard.js

#57
post #14
post #13

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. Also... h1 { font-family: Comic Sans MS; } Seriously?

Yeah there's still a bit of work to do on the paint can. Hey, Comic Sans fits perfectly here, don't you think? :)

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.

Re: Show HN: Drawingboard.js

#58
post #50
post #49

Earlier quoted context omitted.

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 r…

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.

Post reply on HN