CODEWITHSUNDEEP
javascriptcsshtmlhtml5-canvasdrawing
user5633497
user5633497

Reputation:

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

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

Upvotes: 1

Views: 710

Answers (2)

Nina Scholz
Nina Scholz

Reputation: 386560

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>

Upvotes: 1

Rick van Mook
Rick van Mook

Reputation: 2065

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.

Upvotes: 0

Related Questions