Spotlight: jQuery plugin

Recently I worked on a website help system, the main feature of which was to highlight particular elements on areas of the page. You know the kind of thing: ‘Click the highlighted search button to search your data’. The designs I was given showed the web page covered by a semi-transparent grey overlay, except for the areas that needed highlighting.

Here’s the problem. The shapes of the un-highlighted bits weren’t just rectangles; they were circles. So my immediate idea of using a bunch of absolutely-positioned <div> elements with opacity:0.6 wasn’t going to cut it.

I decided to use the <canvas> element, and after some digging found this excellent page on the Mozilla developer docs site that explains the different modes available for compositing multiple shapes in a single canvas element. This was the answer.

<canvas> is supported by IE9 and above, which was acceptable for the project I was working on. If you need support for older IEs then this looks like a good solution.

Anyway, I thought this kind of approach might be useful for others so I’ve written a small jQuery plugin called Spotlight which allows you to put a spotlight on elements on your page. See a quick demo here.

See the plugin on GitHub.