I can’t draw a circle in my canvas within my square

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