Live data from Hacker News

Exploring canvas drawing techniques

perfectionkills.com

21–30 of 36 posts

Re: Exploring canvas drawing techniques

#23
This is the most educating thing I have seen on HN in a while.

I went through the code for each, starting with the simplest and working my way up to the much more interesting and complex.

The only thing missing is a way to edit the JS and see the result. Looks like it's easy to use an embedded jsfiddle[0], but I have not tried it myself.

[0] http://doc.jsfiddle.net/use/embedding.html

Re: Exploring canvas drawing techniques

#24
post #23

This is the most educating thing I have seen on HN in a while. I went through the code for each, starting with the simplest and working my way up to the much more interesting and complex. The only thing missing is a way to edit the JS and see the result. Looks like it's easy to use an embedded jsfiddle[0], but I have not tried it myself. [0] http://doc.jsfiddle.net/use/embedding.html

> The only thing missing is a way to edit the JS and see the result.

If you look on at the right edge of the grey-ish tab bar, you will see an "edit" link. This opens up a link to CodePen which lets you fork the snippet and mark changes to it. Here is one such link: http://codepen.io/kangax/pen/wDuxl

Re: Exploring canvas drawing techniques

#25
post #15

Brush, fur and neighbor points look really cool. Using Bézier curves, but with variable width, can give nice "handwritten" feel to it - http://szimek.github.io/signature_pad (works best on touch devices).

That was super cool to use, and I totally create a digital version of my signature on my iPhone that I'm going to use! Awesome!

Re: Exploring canvas drawing techniques

#26
post #23

This is the most educating thing I have seen on HN in a while. I went through the code for each, starting with the simplest and working my way up to the much more interesting and complex. The only thing missing is a way to edit the JS and see the result. Looks like it's easy to use an embedded jsfiddle[0], but I have not tried it myself. [0] http://doc.jsfiddle.net/use/embedding.html

> The only thing missing is a way to edit the JS and see the result. If you look on at the right edge of the grey-ish tab bar, you will see an "edit" link. This opens up a link to CodePen which lets you fork the snippet and mark changes to it. Here is one such link: http://codepen.io/kangax/pen/wDuxl

Wow, somehow I completely missed that. Thanks for pointing it out.

Re: Exploring canvas drawing techniques

#27

Earlier quoted context omitted.

Yep, that's mine. I'm a fan. :^)

This is a lot of fun http://i.imgur.com/seMWVWv.png

Thanks. All props should go to Paul Haeberli for the original idea.

I should really update it to add controls for mass and friction. Actually I should make a jsfiddle for this. But, I'm in the middle of something else at the moment..

Re: Exploring canvas drawing techniques

#28
post #2

What a great interactive post. I never knew canvas was so flexible.

Canvas is just a 2D drawing API. Whatever you can do with pixels, you can do in canvas. That includes writing Photoshop if you're so inclined.

Now, that in mind, there are limitations and especially for drawing applications it's a shame that you have to think that hard about how to antialias a stroke (approximating it with shadows – really?). So in a way we dragged 2D graphics to the web, but leaving it with a strange mixture of features which date from a range of 1980–2000.

Re: Exploring canvas drawing techniques

#29
post #25
post #15

Brush, fur and neighbor points look really cool. Using Bézier curves, but with variable width, can give nice "handwritten" feel to it - http://szimek.github.io/signature_pad (works best on touch devices).

That was super cool to use, and I totally create a digital version of my signature on my iPhone that I'm going to use! Awesome!

I had the same impulse, and then it struck me: maybe, just maybe, trying to replicate my hand-written signature on an unknown website that's obviously doing it's best to capture hand-writing is not the absolute best strategy, security-wise.

Not saying the author of that pad is evil or anything, I just questioned my own impulse. And stopped drawing. :)

Re: Exploring canvas drawing techniques

#30
post #29
post #25

Earlier quoted context omitted.

That was super cool to use, and I totally create a digital version of my signature on my iPhone that I'm going to use! Awesome!

I had the same impulse, and then it struck me: maybe, just maybe, trying to replicate my hand-written signature on an unknown website that's obviously doing it's best to capture hand-writing is not the absolute best strategy, security-wise. Not saying the author of that pad is evil or anything, I just questioned my own impulse. And stopped drawing. :)

John Hancocks arent particularly secure anyway, and I actually have little use for my digital version, other than using it on documents to be sent to people. Everything else is handled via other ways (or require actual pen on paper!) :)
Post reply on HN