All html canvas shapes are given the color of the last object added

Question

I was trying to do an Olympic type flag, purely as a way of learning how to draw in JavaScript. This should draw two circles - one blue, one black... Here is the code (which

Answer 1

It's because you are never calling beginPath()!

function drawCircle(ctx,x,y,radius, color){
  var startAngle = 0;
  var endAngle = (Math.PI*2);
  var clockwise = true;
  ctx.fillStyle = color;
  ctx.beginPath(); // <-- Need me!!
  ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
  ctx.fill();
  ctx.closePath;
}

Since you don't call beginPath, you are drawing one blue circle, then you are continuing a path that now has two circles (the old one and the new one), and drawing that path (and thus both circles) black!

Instead you want to draw one blue circle, fill it blue, begin a new path, and draw that one black.

Live code:

http://jsfiddle.net/5PDUb/1/