I am using a canvas element on my web page, and need to be able to draw circles on mouse click with a different color each click. Here is the code I have, which works on some sites but not others. My question is what am I missing for this to work? I know that it only has one color currently in the code, but as it stands, I click all over the canvas and nothing happens.

```js
var canvas = document.getElementById("cirCanvas");
var context = canvas.getContext("2d");

function createImageOnCanvas(imageId) {
  canvas.style.display = "block";
  document.getElementById("circles").style.overflowY = "hidden";
  var img = new Image(300, 300);
  img.src = document.getElementById(imageId).src;
  context.drawImage(img, (0), (0)); //onload....
}

function draw(e) {
  var pos = getMousePos(canvas, e);
  posx = pos.x;
  posy = pos.y;
  context.fillStyle = "#000000";
  context.beginPath();
  context.arc(posx, posy, 50, 0, 2 * Math.PI);
  context.fill();
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

window.draw = draw;
```

```html
<head>
  <title></title>
  <meta charset="utf-8">
  <script src="clickCircle.js"></script>

</head>

<body>
  <div id="circles"></div>
  <canvas id="cirCanvas" width="250" height="250" onclick="draw  (event)">
  </canvas>

</body>
```