This is a kaleidoscope implemented in canvas.

Patterns can be created in HTML5 canvas using context object’s function “createPattern”. Patterns can be created with images. Fortunately for us, HTML5 treats Canvas objects itself as images. With this in mind I thought it would be easy to implement an animated kaleidoscope.
The steps to do that that is very simple. We simply take an off-screen canvas on which we perform an animation. Create a pattern made up of the animation function and use it to fill a pie shape. This pie shape can then be rotated around a central axis to give an illusion of a kaleidoscope. Like so.


While this worked wonderfully and was very easy to implement, I found out that the createPattern function eats up a lot of memory and the longer the kaleidoscope runs, the slower the animation gets. And I am talking about slowness on an 8GB, Intel i7 processor. That is bad.

This was obviously abandoned.

The below implementation is a much simpler one. One that does not use createPattern and thus is not processor or memory intensive. In this solution I have taken an animating canvas and rotate it 45 degrees each time. Here is what one slice looks like.


With two slices it becomes clear where we are going with this.


We can do this until the penultimate slice, because the last slice is going to overlap the first one and thus will ruin the illusion.

For the last slice alone, I create another canvas that is clipped to the exact dimensions that is required to fill the gap.


The final effect is very nice. But I’ll let you be the judge.
Select from one of the below animating patterns.

Click here to see/hide the off-screen canvas.

Show code