Question

We have a design we need to implement where the concept is the user is shining a flashlight on an object and anything within the flashlight’ beam (a circle around the cursor) should show the background image instead of the foreground image.

I’m looking on suggestions for how to implement ideally using jQuery and HTML5 techniques. I’m quite sure we could achieve this with Flash but we want it to be iOS friendly.

Answer 1

You could use two html canvases.

The foreground would be a canvas with a higher z-index than the background and they would both be position:absolute and be contained by a container element.

Then you would find the location of a circle centered around the mouse (see resources)

You would get it’s position by using the mouse move event and subtracting half the height and width of the circle from the location of the mouse to center it around the mouse.

Then you could manipulate the pixels on the canvas that have the same coordinates as the circle to have an alpha value of 0 (or a number between 0 and 1 if you don’t want it to be completely transparent)

Hopefully that explains it thoroughly enough. Feel free to ask any questions. I’m not going to just hand out code though because that’s not the point of this forum really.

Resources:

Basics:
http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/

Get coordinates of a circle:
Calculate circle coordinates in a sequential fashion

Manipulate Pixels:
http://tutorials.jenkov.com/html5-canvas/pixels.html