jQuery 1.4 Animation Techniques Beginner's Guide

Time for action – animating the red crosses

All we need to do now is draw the vertical red cross and the four custom red shapes. Add the following code in between the rectInt variable declaration near the top of the <script> and the whiteLines function we defined in the previous section:

redCross = function(context) { context.fillStyle = "#C00"; context.strokeStyle = "#C00"; context.lineWidth = 30; var width = 0, height = 0, pos = { up : { x: 250, y: 150 }, down : { x: 250, y: 150 }, left: { x: 250, y: 150 }, right: { x: 250, y: 150 } }, addStripes = function() { context.lineWidth = 1; function makeStripe(props) { context.beginPath(); context.moveTo(props.startX, props.startY); context.lineTo(props.line1X, props.line1Y); context.lineTo(props.line2X, ...