My function initCanvas() in JavaScript is drawing the rectangles but not in the correct position

Question

This is the JavaScript for the canvas element. There must be something wring with the code that fills and draw the rectangles:

function initCanvas() {
var ctx = document.getElementById("my_canvas").getContext("2d");
ctx.canvas.addEventListener("mousemove", function(event) {
    var mouseX = event.clientX - ctx.canvas.offsetLeft;
    var mouseY = event.clientY - ctx.canvas.offsetTop;
    var status = document.getElementById("status");
    status.innerHTML = mouseX + " | " + mouseY;
});

ctx.canvas.addEventListener("click", function(event) {
    var mouseX = event.clientX - ctx.canvas.offsetLeft;
    var mouseY = event.clientY - ctx.canvas.offsetTop;
    //alert(mouseX + " | " + mouseY);
    ctx.fillStyle = "orange";
    ctx.fillRect(mouseX, mouseY, 30, 30);
});
}

window.addEventListener("load", function(event) {
    initCanvas();
});

This is the HTML with the canvas element

<body>
    <canvas id="my_canvas"></canvas>
    <h2 id="status">0 | 0</h2>
</body>

This is the CSS giving the canvas a height and width

canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

h2 {
    color: black;
    font-family: Varela Round;
}

score 1 · Answer 1 · edited May 23 '17 at 12:13

You need to set the canvas size. Read more at HTML5 Canvas 100% height and width.

var canvas = document.getElementById("my_canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

But you have to implement a resize event for the actual window size, too.

window.addEventListener("resize", function () {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

Working example:

var canvas = document.getElementById("my_canvas");

function initCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    var ctx = canvas.getContext("2d");
    ctx.canvas.addEventListener("mousemove", function (event) {
        var mouseX = event.clientX - ctx.canvas.offsetLeft;
        var mouseY = event.clientY - ctx.canvas.offsetTop;
        var status = document.getElementById("status");
        status.innerHTML = mouseX + " | " + mouseY;
    });

    ctx.canvas.addEventListener("click", function (event) {
        var mouseX = event.clientX - ctx.canvas.offsetLeft;
        var mouseY = event.clientY - ctx.canvas.offsetTop;
        //alert(mouseX + " | " + mouseY);
        ctx.fillStyle = "orange";
        ctx.fillRect(mouseX, mouseY, 30, 30);
    });
}

window.addEventListener("load", function (event) {
    initCanvas();
});

window.addEventListener("resize", function () {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* set to % */
}

h2 {
    color: black;
    font-family: Varela Round;
}

<canvas id="my_canvas" width="1000" heigth="1000"></canvas>
<h2 id="status">0 | 0</h2>

I'd move the `var canvas = document.getElementById("my_canvas")` outside of the `resize` handler so we're not searching for the element each time we resize. Maybe just declare `var canvas;` at the top. So `initCanvas()` can set the value and the rest of our code can reference it whenever it needs. — Rick van Mook, Mar 04 '16 at 02:43

score 0 · Accepted Answer · answered Mar 03 '16 at 15:38

Just setting the width and height of the canvas in CSS isn't enough to tell the context its dimensions. By default the canvas has a width of 300 and a height of 150. That coordinate system is what's being used when you call ctx.fillRect and the reason why it's all stretched out.

What you need is to set your canvas size with JavaScript. Try adding a resize listener to the window and set the width and height of the canvas with JavaScript.

window.addEventListener('resize', resizeCanvas);

// call it initially because 'resize' events won't trigger on page load
resizeCanvas();

function resizeCanvas() {
        ctx.canvas.width = window.innerWidth;
        ctx.canvas.height = window.innerHeight;
}

This will update the context dimension and you're actually drawing based on the window coordinates.

My function initCanvas() in JavaScript is drawing the rectangles but not in the correct position

2 Answers2