Removing solely the selected item, leaving the rest of the elements on the canvas untouched

Question

Removing solely the selected item, leaving the rest of the elements on the canvas untouched

Just starting out with coding and working on a game for a school project. The idea is to have random circles or "targets" appear on the screen, and the user has to click them. I've been struggling with keeping the "un-clicked" circles on the canvas when a new circle is clicked. Looking for some guidance on how to achieve this. Any simple tips would be greatly appreciated!

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var radiustracker = [];
var xpos = [];
var ypos = [];
var radius;
var x;
var y;
var color = 'blue';
ctx.fillStyle = 'lightblue';
ctx.fillRect(0, 0, canvas.width, canvas.height);

function randomize() {
  radius = Math.floor(Math.random() * 25) + 10;
  x = Math.floor(Math.random() * 600) + 50;
  y = Math.floor(Math.random() * 400) + 50;
  radiustracker.push(radius);
  xpos.push(x);
  ypos.push(y);
  drawCircle(x, y, radius);
}

function drawCircle(x, y, radius) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.fillStyle = color;
  ctx.fill();
}

function clickCircle(xmus, ymus) {
  for (var i = 0; i < xpos.length; i++) {
    var distance =
      Math.sqrt(
        ((xmus - xpos[i]) * (xmus - xpos[i])) +
        ((ymus - ypos[i]) * (ymus - ypos[i]))
      );
    console.log(distance);
    if (distance < radiustracker[i]) {
      radiustracker[i] = 0;
      ctx.fillStyle = 'lightblue';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
  }
}

var intervall = setInterval(randomize, 1000);
canvas.addEventListener('click', (event) => {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  clickCircle(x, y);
});

#canvas {
  display:inline;
  margins:auto;
}

<body>
<canvas id="canvas" height="500" width="700" ></canvas>
</body>

javascript canvas

Answer 1

Answer №1

Using an array of objects is a better approach than having three separate arrays for tracking circle x, y, and r values:

var circlesDrawn = [];
//For each circle drawn, add its properties to the array
circlesDrawn.push({
    x: x,
    y: y,
    r: r
});

This way, data is grouped together logically.

To remove a clicked circle in a JS Canvas, you cannot directly remove it; instead, clearRect can be used efficiently by clearing the canvas and redrawing the remaining circles after removing the clicked one from the circles array (by filtering out the matching x, y, and r).

Additionally, you can implement interval drawing for new circles as well.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var circles = [];

function drawCanvas() {
    //Clear canvas and redraw existing circles
}

function clickCircle(xmus, ymus){
    //Remove clicked circle from array and update canvas
}

canvas.addEventListener('click', (event) => {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    clickCircle(x,y);
});

function randomize(){
    //Generate random circle properties and add to array
}

var interval = setInterval(randomize, 1000);

The code has been tidied up to enhance readability and functionality. It draws all circles at the beginning, handles circle removal on click, and adds new circles at intervals. The implementation has been verified and works flawlessly!

Answer 2

Using an array of objects is a better approach than having three separate arrays for tracking circle x, y, and r values:

var circlesDrawn = [];
//For each circle drawn, add its properties to the array
circlesDrawn.push({
    x: x,
    y: y,
    r: r
});

This way, data is grouped together logically.

To remove a clicked circle in a JS Canvas, you cannot directly remove it; instead, clearRect can be used efficiently by clearing the canvas and redrawing the remaining circles after removing the clicked one from the circles array (by filtering out the matching x, y, and r).

Additionally, you can implement interval drawing for new circles as well.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var circles = [];

function drawCanvas() {
    //Clear canvas and redraw existing circles
}

function clickCircle(xmus, ymus){
    //Remove clicked circle from array and update canvas
}

canvas.addEventListener('click', (event) => {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    clickCircle(x,y);
});

function randomize(){
    //Generate random circle properties and add to array
}

var interval = setInterval(randomize, 1000);

The code has been tidied up to enhance readability and functionality. It draws all circles at the beginning, handles circle removal on click, and adds new circles at intervals. The implementation has been verified and works flawlessly!

Answer 3

Answer №2

Whenever you remove a circle, all circles must be redrawn; there's no getting around that. My modification is fairly straightforward: in the clickCircle function, I first clear the entire canvas and then iterate through each circle, deleting those that were clicked on and redrawing the ones that weren't.

// Remember not to use var as it can cause unexpected behavior. Instead, opt for const and let.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// It's better to store data in a single array rather than separate arrays for radius and positions
const circles = [];
const color = 'blue';
ctx.fillStyle = 'lightblue';
ctx.fillRect(0, 0, canvas.width, canvas.height);

function randomize() {
  // Keep variable scope limited; previously, radius, x, and y were global variables but now they are local to the function
  const radius = Math.floor(Math.random() * 25) + 10;
  const x = Math.floor(Math.random() * 600) + 50;
  const y = Math.floor(Math.random() * 400) + 50;
  const circle = {radius: radius, x: x, y: y}
  circles.push(circle)
  drawCircle(circle)
}

function drawCircle(circle) {
  ctx.beginPath();
  ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.fillStyle = color;
  ctx.fill();
}

function clickCircle(xmus, ymus) {
  // Clear the canvas
  ctx.fillStyle = 'lightblue';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // Iterate backwards while removing elements within the loop
  for (let i = circles.length - 1; i >= 0; i--) {
    const circle = circles[i]
    const distance =
      // Use ** for exponentiation
      Math.sqrt(
        ((xmus - circle.x) ** 2) +
        ((ymus - circle.y) ** 2)
      );
    if (distance < circle.radius) {
      // Remove item from the array using Array.splice(index, count)
      circles.splice(circles.indexOf(circle), 1);
    } else {
      // Redraw circles that were not clicked
      drawCircle(circle);
    }
  }
}

const intervall = setInterval(randomize, 1000);
canvas.addEventListener('click', (event) => {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  clickCircle(x, y);
});

#canvas {
  display:inline;
  margins:auto;
}

<body>
<canvas id="canvas" height="500" width="700" ></canvas>
</body>

Answer 4

Whenever you remove a circle, all circles must be redrawn; there's no getting around that. My modification is fairly straightforward: in the clickCircle function, I first clear the entire canvas and then iterate through each circle, deleting those that were clicked on and redrawing the ones that weren't.

// Remember not to use var as it can cause unexpected behavior. Instead, opt for const and let.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// It's better to store data in a single array rather than separate arrays for radius and positions
const circles = [];
const color = 'blue';
ctx.fillStyle = 'lightblue';
ctx.fillRect(0, 0, canvas.width, canvas.height);

function randomize() {
  // Keep variable scope limited; previously, radius, x, and y were global variables but now they are local to the function
  const radius = Math.floor(Math.random() * 25) + 10;
  const x = Math.floor(Math.random() * 600) + 50;
  const y = Math.floor(Math.random() * 400) + 50;
  const circle = {radius: radius, x: x, y: y}
  circles.push(circle)
  drawCircle(circle)
}

function drawCircle(circle) {
  ctx.beginPath();
  ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.fillStyle = color;
  ctx.fill();
}

function clickCircle(xmus, ymus) {
  // Clear the canvas
  ctx.fillStyle = 'lightblue';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // Iterate backwards while removing elements within the loop
  for (let i = circles.length - 1; i >= 0; i--) {
    const circle = circles[i]
    const distance =
      // Use ** for exponentiation
      Math.sqrt(
        ((xmus - circle.x) ** 2) +
        ((ymus - circle.y) ** 2)
      );
    if (distance < circle.radius) {
      // Remove item from the array using Array.splice(index, count)
      circles.splice(circles.indexOf(circle), 1);
    } else {
      // Redraw circles that were not clicked
      drawCircle(circle);
    }
  }
}

const intervall = setInterval(randomize, 1000);
canvas.addEventListener('click', (event) => {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  clickCircle(x, y);
});

#canvas {
  display:inline;
  margins:auto;
}

<body>
<canvas id="canvas" height="500" width="700" ></canvas>
</body>

Removing solely the selected item, leaving the rest of the elements on the canvas untouched

Answer №1

Answer №2

Similar questions

Error encountered: TypeError: __webpack_require__.t is not a function - Issue appears only on live server, while localhost runs without any problem

Tips on saving a bitmap image as a png or jpg file while adding text to it

Combining the power of Vuforia with the capabilities of Three

Issue with SideNav function in MaterializeCss following recent update

Tips on manually refreshing AngularJS view using ControllerAs syntax?

What is the reason that an individual would stop another from executing by using $(document).ready(function() { ?

Using JavaScript and jQuery to make calls to the Web API

saving user information with asynchronous HTTP calls

Choosing between global and local Node packages can be a crucial decision that affects

Quick fix for obtaining only one response

Using html data attributes to encode JSON data with strings

Please ensure all three of the last checkboxes are ticked before finalizing submission

Just initiate an API request when the data in the Vuex store is outdated or missing

Struggling to populate dropdown with values from array of objects

Information vanishes as the element undergoes modifications

Identifying the presence of a period within a string

React Navigation Item Toolbar Misplacement

Issues with AJAX junk appearing after the document element in Firefox are causing disruption

Error in Laravel 5.5 PusherBroadcaster.php at line 106

Combining Json attributes in Jquery Grouping