jQuery 1.4 Animation Techniques Beginner's Guide

Time for action – animating the white crosses

In this part of the animation, we'll draw a white line down the middle and across the center of the rectangle, and then make the diagonal cross grow out from the center to the corners. The following code should be added in between the canvas and init variables in the code so far:

whiteLines = function(context) {

  context.fillStyle = "#fff";
  context.strokeStyle = "#fff";
  context.lineWidth = 50;

  var width = 0,
    height = 0,
    pos = {
      ne: { x: 250, y: 150 },
      se: { x: 250, y: 150 },
      nw: { x: 250, y: 150 },
      sw: { x: 250, y: 150 }
    },
    growDiagonal = function() {
 if (pos.ne.x >= 50) { context.beginPath(); context.moveTo(pos.ne.x, pos.ne.y); context.lineTo(pos.ne.x - 4, pos.ne.y - 2); context.moveTo(pos.se.x, pos.se.y); ...