我无法在我的正方形内的 canvas 中画一个圆圈

Question

I have a problem, I am French and I don't speak English very well. So I explain you the problem: I draw a canvas in js composed of 6 rows and 7 columns then I try to draw a circle in it with a click event. However I can't manage to position in the canvas the circle click well proportioned inside. I tried to get the position of the mouse click to then position my circle in the square, I failed. Then I changed my strategy, I tried to store the canvas in a table then try to push in the square of the canvas the circle, imagining that it is positioned in the limits of the square of my canvas but again failed.

javascript

const canvas = document.getElementById('grille');
const ccc = canvas.getContext('2d');
let i = 0,l = 0;
let x = 10,y = 10;
let tabC = [];
let tabtab = [];
let cnvx = -40,cnvy = 560;
let posiX = 0,posiY = 0;
let test;
// fonction dessine caneva
(function (){
        for (l = 0; l < 6; l++) {
            for (i = 0; i < 7; i++) {
                tabtab.push(ccc.strokeRect(x, y, 100, 100));
                tabC.push('');
                x += 100;
            }
            y += 100;
            x = 10;
        }console.log("tabtab : "+tabtab);
})();

canvas.addEventListener('click', function (e) {
    posiX = e.offsetX;
    posiY = e.offsetY;
    console.log((e.offsetX)+ ' , ' + (e.offsetY));
    for (let j = 0;j<tabC.length;j++){
        if (tabC[j]===''){
            tabC.push('0');
            ccc.beginPath();
            ccc.fillStyle = 'red';
            tabtab.push(ccc.arc(e.offsetX, e.offsetY , 40, 30, 0, 2 * Math.PI));
            ccc.fill();
            ccc.closePath();
        }
    }

enter image description here

Answer 1

I've created an example that places circles in a grid by calculating their grid coordinate .

It converts the pixel coordinate of the click into a grid square by applying the math.floor function to subtracting the top corner of the grid and dividing by the size of the grid:

  let gridX = Math.floor((mouseX - startX) / gridSize);
  let gridY = Math.floor((mouseY - startY) / gridSize);

It then calculates the center of that grid square by converting the grid coordinate back to a pixel coordinate and adding half the size of the grid square

  let pixelX = startX + gridX * gridSize + gridSize / 2;
  let pixelY = startY + gridY * gridSize + gridSize / 2;

As a bonus, I've also added an array that keeps track of which squares have been filled, gridState. Squares that have been filled will be true, others will be false.