jQuery(document).ready(function()
{
  var canvas = document.getElementById("flag");
  if (canvas.getContext)
  {
    var ctx = canvas.getContext("2d");
    
    // Background.
    ctx.fillStyle = "white";
    ctx.strokeStyle = "black";
    ctx.fillRect(0, 0, 296, 156);
    ctx.strokeRect(0, 0, 296, 156);

    ctx.fillStyle = "#B22234";

    // Draw red stripes.
    for (var s = 0; s < 7; s++)
    {
      var y = 24 * s;
      ctx.fillRect(0, y, 296, 12);
      ctx.strokeRect(0, y, 296, 12);
    }
    
    // Draw blue field at upper left;
    ctx.fillStyle = "#3C3B6E";
    ctx.fillRect(0, 0, 118, 84);
    ctx.strokeRect(0, 0, 118, 84);

    // Draw 50 stars.    
    ctx.fillStyle = "white";
    for (var row = 0; row < 9; row++)
    {
      var isEven = ((row % 2) == 0)
      var numStars = isEven ? 6 : 5;
      var nOffset  = isEven ? 5 : 14;

      // Draw row of stars;
      for (var j = 0; j < numStars; j++)
        drawStar(ctx, nOffset + 18.8 * j, 4 + 8 * row, 0.03);
    } // for row

  } // if (canvas.getContext)
});


function drawStar(ctx, tx, ty, scale)
{
  // USE:  Draw regular five-pointed star.
  // IN:   ctx = graphics context to draw in
  //       tx = x amount to translate
  //       ty = y amount to translate
  //       scale = scale factor (0.5 to halve, 2.0 to double)
  // NOTE: Uses the ctx's current fillStyle and strokeStyle 

  ctx.save();

  // Values below will be translated and scaled as set here.
  ctx.translate(tx, ty);
  ctx.scale(scale, scale);

  // Draw five-pointed star in 380 x 362 box.
  ctx.beginPath();
  ctx.moveTo(35,163);
  ctx.lineTo(415,163);
  ctx.lineTo(107,387);
  ctx.lineTo(225,25);
  ctx.lineTo(343,387);
  ctx.lineTo(35,163);
  ctx.closePath();
  ctx.stroke();
  ctx.fill();

  ctx.restore();
} // drawStar()