CODEWITHSUNDEEP
javascriptcanvas2d
Nono
Nono

Reputation: 3

Wrong position of my rectangle - javascript

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

Upvotes: 0

Views: 101

Answers (1)

fraaahzeep
fraaahzeep

Reputation: 168

There is an issue with the height of the canvas element. Your dots are being cut off.

By default a canvas elements height is set at 150px. The width is set at 300px. Just needed to make the canvas element a square to create your die face. HTMLCanvasElement.height

Adding the following line in the drawDice function seems to fix this problem.

        this.canvas_dice.height = canvas_size;

Upvotes: 1

Related Questions