Rahila Rahila - 3 years ago 133
HTML Question

hiding or erasing the the circle from canvas if user clicks on same area

Hi i am trying to implement the something into my current app. I want to hide the overlapping circles if user clicks at a point where new circle comes over the old circle. So i have to erase or hide the circle drawn previously and then make new circle in canvas. My current code is running well but without hidding the overlapping circles.So i am stuck on it. I dont know how to make a json array for storing the positions of circles drawn and then removing them if user clicks or draws near the same circle. Circle radius i have kept as 30. Here's my current code.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas Sample -- Arc Shapes</title>
<meta charset="utf-8">
<script src="circle2.js"></script>
<style type="text/css">

#testCanvas {
border: 1px solid #999
}


</style>

</head>
<body>

<canvas id="testCanvas" width="400" height="400"> </canvas>

</body>
</html>


//javascript code

window.onload = init;

// access the canvas element and its context
function init() {

var canvas = document.getElementById("testCanvas");
var context = canvas.getContext("2d");
// add click handler
canvas.onclick = function(e) {
var pos = getMousePos(canvas, e); // get position as before
context.fillStyle = randomColor(); // get the fill color
var path=[]; //array to store the positions.

// fill a circle
context.beginPath();
context.arc(pos.x, pos.y, 30, 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
};
}

Answer Source

You simply need to store the coordinates of each circle when the mouse is clicked. You can use an array for that. Then you'll need a bunch of methods to process mouse click, circle intersection and finally, drawing them.

I've modified the your script as follows:

// access the canvas element and its context
var canvas = document.getElementById("testCanvas");
var context = canvas.getContext("2d");
var circles = []; // An empty array to hold our circles

// add click handler
canvas.onclick = function(e) {
  var pos = getMousePos(canvas, e);
  addCircle(pos.x, pos.y);
}

function addCircle(mouse_x, mouse_y) {
  // First, we check if there is any intersection with existing circles
  for (var i = circles.length - 1; i > 0; i--) {
    var circle = circles[i],
      distance = getDistance(circle.x, circle.y, mouse_x, mouse_y);

    // If distance is less than radius times two, then we know its a collision
    if (distance < 60) {
      circles.splice(i, 1); // Remove the element from array
    }
  }

  // Second, we push the new circle in the array
  circles.push({
    x: mouse_x,
    y: mouse_y,
    color: randomColor()
  });

  // Third, we draw based on what circles we have in the array
  drawCircles();
}

function drawCircles() {
  // We'll have to clear the canvas as it has deleted circles as well
  context.clearRect(0, 0, canvas.width, canvas.height);

  for (var i = circles.length - 1; i > 0; i--) {
    var circle = circles[i];

    context.fillStyle = circle.color;
    context.beginPath();
    context.arc(circle.x, circle.y, 30, 0, 2 * Math.PI);
    context.fill();
  }
}

// Function to get distance between two points
function getDistance(x1, y1, x2, y2) {
  // Distance formula
  return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
}

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
  };
}
canvas {
  border: 1px solid #999
}
<canvas id="testCanvas" width="400" height="400"> </canvas>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download