Incorporate additional ctx components in your canvas design

Question

Incorporate additional ctx components in your canvas design

My task is to generate two canvases, one large and one small. Within the large canvas, I need to create 5 stars with varying colors.

The objective is to change the color of the small canvas to match the color of the star when clicked. The issue arises as the addEventListener function only seems to work on the last element. Any suggestions?

Here is the HTML template:

<canvas style="background-color:rgb(255, 255, 255); border: 1px solid black" id='big'>Update Browser</canvas>
<canvas style="background-color:rgb(255, 255, 255); border: 1px solid black" id='small'>Update Browser</canvas>

Here's the JavaScript script:

const big = document.getElementById("big");
const small = document.getElementById("small");

big.height = 600;
big.width = 600;
small.height = 600;
small.width = 50;

function createStar(moveToX, moveToY, lineToX1, lineToY1, lineToX2, lineToY2, lineToX3, lineToY3, lineToX4, lineToY4, color) {
            ctx = big.getContext('2d');
            ctx.beginPath();
            ctx.moveTo(moveToX, moveToY);
            ctx.lineTo(lineToX1, lineToY1);
            ctx.lineTo(lineToX2, lineToY2);
            ctx.lineTo(lineToX3, lineToY3);
            ctx.lineTo(lineToX4, lineToY4);
            ctx.closePath();
            ctx.strokeStyle = color;
            ctx.fillStyle = color;
            ctx.fill();
            ctx.stroke();
};

const red = new createStar(20, 60, 100, 60, 35, 110, 60, 25, 85, 110, 'red');
const blue = new createStar(120, 60, 200, 60, 135, 110, 160, 25, 185, 110, 'blue');
const green = new createStar(120, 160, 200, 160, 135, 210, 160, 125, 185, 210, 'green');
const black = new createStar(220, 460, 400, 460, 235, 560, 300, 400, 385, 560, 'black');
const yellow = new createStar(220, 260, 300, 260, 235, 310, 260, 225, 285, 310, 'yellow');

big.addEventListener('click', function(e){
            if(ctx.isPointInPath(e.offsetX, e.offsetY)) {
                small.style.backgroundColor = 'red';
            } else {
                small.style.backgroundColor = 'white';
            }
});

javascript canvas

Answer 1

Answer №1

context.isPointInPath(x, y) can be utilized to determine if the point at coordinates x and y lies within the current sub-path being traced in the context.

Whenever you invoke ctx.beginPath(), this existing sub-path is erased.

To address this issue, one would need to iterate through all the stars and individually check if the point falls within any of them.
Alternatively, there exists a Path2D interface that provides a solution.

This interface enables the storage of such sub-paths as separate objects which can then be accessed by the context using methods like ctx.fill(path), ctx.stroke(path), ctx.clip(path), ctx.scrollPathIntoView(path),

ctx.drawFocusIfNeeded(path, element)

, and of course, ctx.isPointInPath(path, x, y) or ctx.isPointInStroke(path, x, y).

Hence, a recommended approach is to store each star in its own Path2D instance, add these instances to an Array, and subsequently loop through the Array to verify if any of the stars have been clicked:

const stars = [];
const big = document.getElementById("big");
const small = document.getElementById("small");

big.height = 600;
big.width = 500;
small.height = 600;
small.width = 50;

const ctx = big.getContext("2d");

function createStar(moveToX, moveToY, lineToX1, lineToY1, lineToX2, lineToY2, lineToX3, lineToY3, lineToX4, lineToY4, color) {
  const path = new Path2D();
  // storing the path along with the color
  stars.push({path, color});
  path.moveTo(moveToX, moveToY);
  path.lineTo(lineToX1, lineToY1);
  path.lineTo(lineToX2, lineToY2);
  path.lineTo(lineToX3, lineToY3);
  path.lineTo(lineToX4, lineToY4);
  ctx.strokeStyle = color;
  ctx.fillStyle = color;
  ctx.fill(path);
  ctx.stroke(path);
};

const red = new createStar(20, 60, 100, 60, 35, 110, 60, 25, 85, 110, 'red');
const blue = new createStar(120, 60, 200, 60, 135, 110, 160, 25, 185, 110, 'blue');
const green = new createStar(120, 160, 200, 160, 135, 210, 160, 125, 185, 210, 'green');
const black = new createStar(220, 460, 400, 460, 235, 560, 300, 400, 385, 560, 'black');
const yellow = new createStar(220, 260, 300, 260, 235, 310, 260, 225, 285, 310, 'yellow');

big.addEventListener('click', function(e) {
  // finding the star that was clicked
  const touched = stars.find((star) =>
    ctx.isPointInPath(star.path, e.offsetX, e.offsetY)
  );
  if (touched) {
    small.style.backgroundColor = touched.color;
  } else {
    small.style.backgroundColor = 'white';
  }
});

canvas {
  background-color: rgb(255, 255, 255);
  border: 1px solid black;
}

<canvas id='big'>Please update your browser</canvas>
<canvas id='small'>Please update your browser</canvas>

Answer 2

context.isPointInPath(x, y) can be utilized to determine if the point at coordinates x and y lies within the current sub-path being traced in the context.

Whenever you invoke ctx.beginPath(), this existing sub-path is erased.

To address this issue, one would need to iterate through all the stars and individually check if the point falls within any of them.
Alternatively, there exists a Path2D interface that provides a solution.

This interface enables the storage of such sub-paths as separate objects which can then be accessed by the context using methods like ctx.fill(path), ctx.stroke(path), ctx.clip(path), ctx.scrollPathIntoView(path),

ctx.drawFocusIfNeeded(path, element)

, and of course, ctx.isPointInPath(path, x, y) or ctx.isPointInStroke(path, x, y).

Hence, a recommended approach is to store each star in its own Path2D instance, add these instances to an Array, and subsequently loop through the Array to verify if any of the stars have been clicked:

const stars = [];
const big = document.getElementById("big");
const small = document.getElementById("small");

big.height = 600;
big.width = 500;
small.height = 600;
small.width = 50;

const ctx = big.getContext("2d");

function createStar(moveToX, moveToY, lineToX1, lineToY1, lineToX2, lineToY2, lineToX3, lineToY3, lineToX4, lineToY4, color) {
  const path = new Path2D();
  // storing the path along with the color
  stars.push({path, color});
  path.moveTo(moveToX, moveToY);
  path.lineTo(lineToX1, lineToY1);
  path.lineTo(lineToX2, lineToY2);
  path.lineTo(lineToX3, lineToY3);
  path.lineTo(lineToX4, lineToY4);
  ctx.strokeStyle = color;
  ctx.fillStyle = color;
  ctx.fill(path);
  ctx.stroke(path);
};

const red = new createStar(20, 60, 100, 60, 35, 110, 60, 25, 85, 110, 'red');
const blue = new createStar(120, 60, 200, 60, 135, 110, 160, 25, 185, 110, 'blue');
const green = new createStar(120, 160, 200, 160, 135, 210, 160, 125, 185, 210, 'green');
const black = new createStar(220, 460, 400, 460, 235, 560, 300, 400, 385, 560, 'black');
const yellow = new createStar(220, 260, 300, 260, 235, 310, 260, 225, 285, 310, 'yellow');

big.addEventListener('click', function(e) {
  // finding the star that was clicked
  const touched = stars.find((star) =>
    ctx.isPointInPath(star.path, e.offsetX, e.offsetY)
  );
  if (touched) {
    small.style.backgroundColor = touched.color;
  } else {
    small.style.backgroundColor = 'white';
  }
});

canvas {
  background-color: rgb(255, 255, 255);
  border: 1px solid black;
}

<canvas id='big'>Please update your browser</canvas>
<canvas id='small'>Please update your browser</canvas>

Incorporate additional ctx components in your canvas design

Answer №1

Similar questions

Provide personalized files according to individual preferences

Scrolling behavior in two columns with sticky positioning

Ways to conceal an element in Angular based on the truth of one of two conditions

Filtering out specific properties from an element within a JavaScript forEach loop

Displaying information post-inquiry - Google Visualizations

Here's a unique rewrite of the text: "Learn how to trigger a new action within an existing action

Adding Polyfills to ChainWebpack in Vue 3

Having trouble transforming JSON into an array using Angular.js

Executing Code in VueJS after an Event has been Successfully Dispatched

Utilizing AJAX requests in PHP's MVC framework

Ways to access reference data within the parent data map in Firebase

What is the most effective method for implementing a "Like" feature without any redundant code?

Tips for utilizing loops in Node.js to store form data as objects and arrays of objects in MongoDB

Having trouble with JavaScript not working when clicking an image and toggling a div?

My issue lies in the execution flow with the child process in Node.js

The jqxgrid from jqwidget is displaying all content in a single, messy column

Angular dependency injection function

Is it feasible to implement automatic window closure on the alternate website?

Is it possible to alter the background color once the content of an input field has been modified?

When using React, appending a React Link tag to an existing list item may result in the addition of two objects instead of the desired