Draw and fill random colored circles onclick

Question

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.

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;

<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>

MaxZoom · Accepted Answer · 2017-07-11T14:53:05.853

3

Below is example of a random color generator function.
Also you should try add the click event listener in an unobtrusive way.

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

canvas.addEventListener('click', draw, false);

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

function randomColor() {
  var color = [];
  for (var i = 0; i < 3; i++) {
    color.push(Math.floor(Math.random() * 256));
  }
  return 'rgb(' + color.join(',') + ')';
}

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

#cirCanvas {
  border: 1px solid black;
}

<div id="circles">
  <canvas id="cirCanvas" width="250" height="250"></canvas>
</div>

edited Jul 11 '17 at 14:53

answered Jul 11 '17 at 14:30

MaxZoom

7,619
5
28
44

Something must be wrong in my browser. I see the code running fine here, but when I run it local, nothing. – user121168 Jul 11 '17 at 14:37
I have temporarily listed the whole HTML in a separate post. Basically the document need to be created before any calls are invoked on it. – MaxZoom Jul 11 '17 at 14:40
Well it works perfectly when I don't have the javascript in a separate file. Thanks! – user121168 Jul 11 '17 at 14:49
Try to put this line `` after the `body` tag. – MaxZoom Jul 11 '17 at 14:51
Still nothing. I'll keep it all in the html file if it means it works every time. – user121168 Jul 11 '17 at 15:02
One last change. How do I make it so if any of the circles overlap, the new circle will overwrite the existing ones? – user121168 Jul 11 '17 at 18:30
@user121168 I believe it is already that way (new circle on top of the old one). Do you mean to remove old circle when the new one has exactly the same center? – MaxZoom Jul 12 '17 at 15:11
Hi MaxZoom. I mean for the old circle to be removed if any portion of it is overlapped by a new circle. – user121168 Jul 18 '17 at 03:14

score 1 · Answer 2 · answered Jul 11 '17 at 14:23

Here is how to change color - you can randomize the colors:

Best way to generate a random color in javascript?

or use an array of fixed colors

  colors = ["001100","AA0000","00BB00"];

using

  context.fillStyle = "#"+colors[Math.round(Math.random()*colors.length)];

Random version:

var canvas = document.getElementById("cirCanvas"),
  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 = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)
  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;

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

score 0 · Answer 3 · answered Jul 11 '17 at 14:19

0

You have to implement a function which is able to generate a random color.

just use sth. like this:

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

JsFiddle example

answered Jul 11 '17 at 14:19

PRogalla

216
2
12

Any idea why it doesn't do anything when I try running it on my web browser? I see it work on JsFiddle, but nothing happens in my web browser running it locally. – user121168 Jul 11 '17 at 14:29

Draw and fill random colored circles onclick

3 Answers3