Tuesday, March 17th, 2009

Unobstrusive Image Puzzle Maker with Canvas

Category: Canvas, Fun

Wow. Christian Effenberger pointed us to his impressive Snapfit.js project.

Snapfit takes any picture and, if the browser has support for canvas (or VML), will make it into a puzzle. Not just any puzzle, mind. A potentially wicked hard puzzle where the pieces can be mirrored in either axis. But, not to worry, if you need the puzzle solved, it will do an animated transition showing where the pieces should go, etc.

Christian sent us a few notes about performance, etc.:

The speed depends generally on picture dimension and number of puzzle pieces and particularly on browsers Javascript-Canvas-Performance.

It seems that Opera 9.x and Firefox 1.5 are to slow to be practicable, at least on my system (G4/1.25GHz).
Internet Explorer implementation in VML do not support all features and is unable to provide sub pixel precision. So don’t expect to much.

It works in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, IE6+ and Safari.
On older browsers, it’ll degrade and your visitors won’t notice a thing.

Drop it into your site!

Posted by Ben Galbraith at 7:00 am

4.3 rating from 28 votes


Comments feed TrackBack URI

Cool use of canvas, but lets not overpush the “unobtrusive” buzzword. Maybe it doesn’t throw errors, but it still sits there with non-working buttons w/o Javascript, just like most late 90’s DHTML widgets :)

Comment by mrclay — March 17, 2009

It’s just a little detail, but it would be nice if in the demo you could drag the pieces completely off the area where you are assembling the puzzle.

Comment by GregHouston — March 17, 2009

Leave a comment

You must be logged in to post a comment.