Animating objects using HTML5 Canvas
Object animation using JavaScript is fairly simple once you get the hang of it. In the three previous posts I've explained how to render shapes and how to render a series of shapes. To recap some of the steps I've included the part where I create the objects. Creating classes I've created a generic shape class called CShape, with a set of basic properties that I find relevant for any of the shapes I'm going to render. This also includes properties relevant to animation. Each property is explained in the comments below. // Applies to circles, boxes and lines // X and Y coordinates // expand (bool) growing (true) or shrinking (false) // direction - animating going cw or ccw // speed - animation speed // borderThickness - border thickness // borderColor - border color // color - shape color // clickZone - clickable zone with pointer cursor // speed - animation speed function CShape() { this.x = 0; this.y = 0; this.expand = true; this.speed = ...