Bull's eye using the JavaScript Drawing Library

Our first pass at a bull's eye used the following code: 
// Set up the canvas to draw on.
var jg_doc = new jsGraphics(); // draw directly into document


// Draw a rectangle as the border of our image.
jg_doc.setColor("black");
jg_doc.drawRect(50, 50, 250, 250);

// Draw four concentric circles for our bull's eye:

jg_doc.setColor("black");
jg_doc.fillEllipse(100, 100, 150, 150);

jg_doc.setColor("blue");
jg_doc.fillEllipse(120, 120, 110, 110);

jg_doc.setColor("red");
jg_doc.fillEllipse(140, 140, 70, 70);

jg_doc.setColor("yellow");
jg_doc.fillEllipse(160, 160, 30, 30);

// Draw an arrow near the center of the bull's eye.
// I just fiddled with the numbers until this looked arrow-like! :)
jg_doc.setColor("green");
jg_doc.setStroke(2);
jg_doc.drawLine(80, 155, 174, 171);
jg_doc.drawLine(174, 171, 165, 163);
jg_doc.drawLine(174, 171, 164, 176);

// Paint the whole picture so it shows up on the screen.
// Without this, nothing shows at all!
jg_doc.paint();

Here it is in action:

Bull's eye using our fillCircle function

The bull's eye code rewritten to use fillCircle. Notice how I also used arrays. Can you change the code to have a larger circle of purple outside the black circle? Can you reorder the colours? Can you move the centre of the bull's eye? Which of these is easier to do in this version? 
// Fills a circle with the given centre (cx, cy) and radius.
function fillCircle(canvas, cx, cy, radius)
{
  diameter = radius * 2;
  canvas.fillEllipse(cx - radius, cy - radius, diameter, diameter);
}

// Set up the canvas to draw on.
var jg_doc = new jsGraphics(); // draw directly into document


// Draw a rectangle as the border of our image.
jg_doc.setColor("black");
jg_doc.drawRect(50, 50, 250, 250);

// Prepare the list of colours to use for our four concentric circles
colours = new Array("black", "blue", "red", "yellow");

// Go through the array drawing circles..
radius = 75;
for (var counter = 0; counter < colours.length; counter++)
{
  // Set up the current colour.
  jg_doc.setColor(colours[counter]);

  // Draw another circle.
  fillCircle(jg_doc, 175, 175, radius);

  // Tighten the radius by 20 pixels.
  radius = radius - 20;
}


// Draw an arrow near the center of the bull's eye.
// I just fiddled with the numbers until this looked arrow-like! :)
jg_doc.setColor("green");
jg_doc.setStroke(2);
jg_doc.drawLine(80, 155, 174, 171);
jg_doc.drawLine(174, 171, 165, 163);
jg_doc.drawLine(174, 171, 164, 176);

// Paint the whole picture so it shows up on the screen.
// Without this, nothing shows at all!
jg_doc.paint();

Here it is in action:

Bull's eye grid using loops

Here we've wrapped up the bull's eye and arrow into functions so that we can easily make many bull's eyes and arrows. (Note that we could include the code in the loops without putting it into functions, but it would be much harder to read that way!) Can you make it so three arrows strike each target? Can you put another loop inside the existing ones so that a random number of arrows between 1 and 5 hit each target? 
// A function to pick a random integer between low and high (inclusive).
function random(low, high)
{
  return Math.floor(Math.random() * (high - low + 1)) + low;
}

// Set up the canvas to draw on.
var jg_doc = new jsGraphics(); // draw directly into document

// Draws a bull's-eye with the upper-left corner at (x, y) of the given
// size.  (The "size" is arbitrary, but a size 10 bull's eye is the same
// size as our original version.)
function drawBullsEye(x, y, size)
{
  // Notice how we use the x, y, and size parameters to move the shape
  // to the spot we want it and make it as large as we want!

  // Draw the border rectangle.
  jg_doc.setStroke(1);
  jg_doc.setColor("black");
  jg_doc.drawRect(x, y, 25*size, 25*size);
  
  // Draw the bull's eye.
  jg_doc.setColor("black");
  jg_doc.fillEllipse(x+5*size, y+5*size, 15*size, 15*size);
  jg_doc.setColor("blue");
  jg_doc.fillEllipse(x+7*size, y+7*size, 11*size, 11*size);
  jg_doc.setColor("red");
  jg_doc.fillEllipse(x+9*size, y+9*size, 7*size, 7*size);
  jg_doc.setColor("yellow");
  jg_doc.fillEllipse(x+11*size, y+11*size, 3*size, 3*size);
}

// Draws an arrow pointing to the center of a bull's eye positioned at (x,y).
// Size works as with the bull's eye above.
function drawArrow(x, y, size)
{
  // We have to use Math.round to make the possible non-integer results
  // into integers.

  jg_doc.setColor("green");
  jg_doc.setStroke(2);
  jg_doc.drawLine(x + 3*size, y + Math.round(10.5*size), 
  	x + Math.round(12.4*size), y + Math.round(12.1*size));
  jg_doc.drawLine(x + Math.round(12.4*size), y + Math.round(12.1*size), 
  	x + Math.round(11.5*size), y + Math.round(11.3*size));
  jg_doc.drawLine(x + Math.round(12.4*size), y + Math.round(12.1*size), 
  	x + Math.round(11.4*size), y + Math.round(12.6*size));
}

// I want to draw many bull's eyes.
// So, I let x start at 0 and then bump it up by 100 at a time until it
// reaches 500.
//
// For each value of x, I do the same thing for y.
//
// That gives me bull's eyes spaced at 0,0 0,100 0,200 0,300 0,400 and then
// 100,0 100,100 100,200 and so on.
for (var x = 0; x < 500; x = x + 100)
  for (var y = 0; y < 500; y = y + 100)
  {
    // Draw the bull's eye (at size 4 because that looks good!).
    drawBullsEye(x, y, 4);

    // Pick a random spot near (x,y) for the first arrow and draw it.
    var arrowX = random(-30, 30) + x;
    var arrowY = random(-30, 30) + y;
    drawArrow(arrowX, arrowY, 4);

    // Do the same for the second.
    arrowX = random(-30, 30) + x;
    arrowY = random(-30, 30) + y;
    drawArrow(arrowX, arrowY, 4);
  }

// Paint the whole thing!
jg_doc.paint();

Here it is in action: