Photo Kaleidoscope

Pete Chappell has created this canvas demo takes photos from Flickr (currently from a predefined set) and creates a kaleidoscope from them using the HTML5 canvas element.

Photo Kaleidoscope

Choose a photo and play with the effect

Comments from the Author:

I use a combination of drawImage and clip to render a 8 triangular portions of an image on a square canvas. Moving the mouse causes the masks (created by clip) to move over the original image thus creating the kaleidoscope effect.


Applications, Display
Pete Chappell
Posted on:
July 28th, 2010
Posted by:
Andi Smith



Your Rating:
1 Star2 Stars3 Stars4 Stars5 Stars

Works on

BETA Please let us know if you find Photo Kaleidoscope works in other browsers by leaving a comment below.



Does not works under Opera 10.

Posted on July 28, 2010


Works fine for me with Opera 10.53 and with the latest SE Iron browser as well.

Mr. Chappell, have you discovered a loophole or workaround for same-site browser security policy? I’m amazed to note that although the webpage is served from your site, the images are retrieved from Flickr… yet the browser allows these to be loaded by the canvas object!

Posted on July 29, 2010

Pete Chappell

@frank. I have a hidden image on the page that I’m using as the source image for the canvas (i.e. for the Kaleidoscope) and I just change the source of that image using javascript (and the flickr api). I guess that way the image is local to the page. I’m not sure this is a loophole but it does seem to work. I’m hoping to update the project sometime soon with some more ideas.

Posted on July 31, 2010

Add comment

(will not be published)