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>
element 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, props.line2Y); context.lineTo(props.line3X, props.line3Y); context.fill(); context.closePath(); } ...