Cannot get the correct position of mouse movement or canvas height while using canvas that can be resized

Question

I am developing a game and I am struggling to place an image at the bottom of the canvas which has bootstrap column width. But it never returns true height of the canvas for me to position the image at the bottom of the canvas.

 <div id="game" class="mt-10">
    <div id="gameContainer" class="container-fluid">
        <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
        </svg>
        <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
        </svg> <!-- Give this div your desired background color -->
        <div class="container">
            <div class="row text-center  justify-content-center">
                <div class="col-md-2">
                </div>
                <canvas id="gameArea" class="col-md-8"
                    style="border:1px solid blue !important;padding: 0 !important;margin: 0 !important;">
                </canvas>
                <div class="col-md-2">
                    <button class="btn btn-secondary" id="stopGame">Stop Game</button>

                </div>
            </div>
        </div>
    </div>
</div>

In my javascript code i am trying to place image using below code.

let canvas = document.getElementById("gameArea");
let ctx = canvas.getContext("2d");
let bowlImage = new Image();
bowlImage.src = 'images/icon.png';
bowlImage.onload = function () {
ctx.drawImage(bowlImage, 0, canvas.getBoundingClientRect().height - 20, 20, 20);
}

But it always draws image outside canvas which i cannot see. when i tested with hard coded y axis which is below 150 it works.

ctx.drawImage(bowlImage, 0, 120, 20, 20);

I am also moving position of image based on mousemove event and i calculate the new x/y coordinate using evt.clientX - rect.left or evt.clientY - rect.top which is never correct.But if i fetch the height of the canvas using canvas.getBoundingClientRect().height , its always more than 150 and around 391. Not sure how do i get the real height.

score 0 · Answer 1 · answered Oct 04 '19 at 20:24

canvas.getBoundingClientRect() returns values based on the viewport, not the actual height and width of the canvas.

To get the actual height and width of the canvas, simply use canvas.height and canvas.width. You can look at this question to help understand why this is.

For mouse events, you need to calculate percentages to deal with the resizing of the canvas.

Example:

var rect = canvas.getBoundingClientRect();
var widthScale = canvas.width / rect.width;
var heightScale = canvas.height / rect.height;
// where 'e' is the click event
var canvasClickX = (e.clientX - rect.left) * widthScale;
var canvasClickY = (e.clientY - rect.top) * heightScale;

Cannot get the correct position of mouse movement or canvas height while using canvas that can be resized

1 Answers1