race cars

by Ian Arsenault

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<canvas width='500' height='300' id='canvas'>Your browser does not support canvas - go get Chrome!</canvas>

<button class="goBtn" id="go">Go</button>

CSS

canvas {
  border: 1px solid black;
}

JavaScript

var canvas = document.getElementById('canvas');
var goBtn = document.getElementById('go');
goBtn.addEventListener('click', render, false);

if (canvas.getContext) {
  // Grab our context
  var context = canvas.getContext('2d');

  // Make sure we have a valid defintion of requestAnimationFrame
  var requestAnimationFrame =
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function(callback) {
      return setTimeout(callback, 16);
    };

  // Let's define our square
  var square1 = {
    'x': 0,
    'y': 50,
    'width': 50,
    'height': 50,
    'fill': '#FF0000'
  };

  // Let's define our square
  var square2 = {
    'x': 0,
    'y': 120,
    'width': 50,
    'height': 50,
    'fill': '#4169E1'
  };

  var render = function() {
    // Clear the canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

    // Draw the square
    context.beginPath();
    context.rect(square1.x, square1.y, square1.width, square1.height);
    context.fillStyle = square1.fill;
    context.fill();

    // Draw the square
    context.beginPath();
    context.rect(square2.x, square2.y, square2.width, square2.height);
    context.fillStyle = square2.fill;
    context.fill();

    // Finish Line
    context.beginPath();
    context.strokeStyle = 'black';
    context.moveTo(canvas.width - 110, 0);
    context.lineTo(canvas.width - 110, 290);
    context.globalCompositeOperation = "destination-over";
    context.lineWidth = 10;
    context.stroke();

    /*
        context.font = "20pt sans-serif";
        context.fillText("Red is The Winner!", 5, 25, 300);
        context.fillStyle = '#FF0000';


        context.font = "20pt sans-serif";
        context.fillText("Blue is The Winner!", 5, 280, 300);
        context.fillStyle = "red";
    */
    // Redraw
    requestAnimationFrame(render);
  };

  // Start the redrawing process
 ...