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