Fun with HTML5 Canvas

[Hadien]

First off, I like to say that I just joined the forums to a site that I have used as a reference for years, so its cool to finally join the community.

 

I just recently started reading up on HTML5, never actually using it before and I started playing around with the canvas element. after playing with the tryit editors long enough, (I quickly found out that the editor limits how many variables you can have in javascript, so I moved to jsfiddle) and I eventually came up with a couple cool and simple things you can do with a Canvas

 

Canvas Spotlight

Canvas Eyeballs

[davej]

Try...

 

http://corehtml5canvas.com/code-live/ch05/example-5.17/example.html

[Hadien]

another beautiful usage of Canvas.

 

I wasn't fully sure exactly what each line in the code does as I haven't seen full documentation on all the functions. (for example I didn't know why Context.save()/Context.restore() was called so many times, as the W3 canvas reference has no link to describe that). now I think its so that when each item is drawn it wouldn't "demolish" other items that are on other layers, specifically the save/restore were used to simulate layers. at least that's what I think.

[davej]

I think switching contexts may in some ways be similar to the use of layers. It seem to be the convenient way to preserve the set up of each "pen" or "brush" that you might be using.

[astralaaron]

awesome! (spotlight / eyeballs)

[davej]

I think his angle calculation is a little goofy. If the mouse moves slightly up and down close to one eye the farther eye seems to move too much.

[Hadien]

the result of arctangent(). if you graph it out Y will rise faster than x at first, then gets quickly overtaken. I tried to compensate by increasing the period. but there's limits to arctangent. nonetheless its an easily accessible "easing" effect.

[davej]

Well you know what I'm saying. The angle from the center of the iris to the center of the eyeball seems to be excessive in the farther eye. I would have to puzzle over the trigonometry to figure out what the fix would be. What you have is a good approximation. Also the distance of the iris from eyeball center has some 3D presumptions.

[guradio]

very nice.do you a spot light like the one in Mr bean? that would be cool if you can do something like that