Simple Canvas Tweening Demo

Demo



About

The purpose of this demo was to play around with and learn about the HTML5 canvas element. If you'd like to learn more about canvas, go here. The demo features some very basic tweening affects. When you click inside the canvas, the square will move to the destination, and will slowly change colors/size/rotation. You can use the controls to the right of the canvas to set various properties, or set them to be randomly changed every click. All of the intervening positions/colors/rotations between the start point and end point are linearly interpolated (hence the tweening). This is all based around a project I started in Common Lisp and OpenGL.