I have to code a dice game, but i have a problem with my dice.

So, this is my code :

export class Dice {

    constructor() {
        this.canvas_dice = document.getElementById("dice-canvas");
    }

    drawDice(value) {
        let ctx = this.canvas_dice.getContext('2d');
        let canvas_size = this.canvas_dice.width;
        let dot_size = canvas_size / 3;
        let matrice = {
            1: [[1, 1]],
            2: [[0, 0], [2, 2]],
            3: [[0, 0], [1, 1], [2, 2]],
            4: [[0, 0], [2, 0], [0, 2], [2, 2]],
            5: [[0, 0], [2, 0], [0, 2], [2, 2], [1, 1]],
            6: [[0, 0], [0, 1], [0, 2], [2, 0], [2, 1], [2, 2]]
        }

        matrice[value].forEach(dot => {
            console.log(dot);
            let x = dot[0] * dot_size;
            let y = dot[1] * dot_size;

            console.log(x + " " + y);

            ctx.fillStyle = 'rgb(255, 0, 0)';
            ctx.fillRect(x, y, dot_size, dot_size);
        });
    }
}

And for example, when I call the function like this

let dice = new Dice();
dice.drawDice(2);

I have that on my browser and that in my console.

I don't understand why my dot isn't in the good position.

And I have the same issue with every other value in my drawDice function.

Can you see my mistake and how could I fix it?

Thank you in advance