Canvas Blending Kaleidoscope

Circles, squares, and triangles are drawn unto the canvas element to demonstrate the effects of different blending styles.

YOUR BROWSWER DOES NOT SUPPORT HTML5 CANVAS

ToggleShapes

toggle which shapes get drawn to the screen using key codes or radio buttons





On Off
On Off
On Off
On Off

Current Draw Style:

change the drawing styles with key codes or radio buttons:

Q: SOURCE-OVER
W: SOURCE-IN
E: SOURCE-OUT
R: SOURCE-ATOP
A: DESTINATION-OVER
S: DESTINATION-IN
D: DESTINATION-OUT
F: DESTINATION-ATOP
Z: LIGHTER
X: COPY
C: XOR



How It's Made...

Download the file here: kaleidoscope.js


Things that work well:


Things I'd like to impove: