Search code examples
javascripthtmlhtml5-canvas

Canvas element having padding + scrollbar

enter image description here My canvas element has padding and a scrollbar, and no matter what I try to do (such as setting padding to 0px, display to block, and margin to 0), the problem still persists. I've looked at different solutions online, but none of them seemed to fix my issue. Maybe I did them wrong? Can anyone help? Thanks!

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
var window_height = window.innerHeight;
var window_width = window.innerWidth;
canvas.width = window_width;
canvas.height = window_height;
canvas.style.background = "yellow";


class circle {
    constructor(xpos, ypos, radius, color, speed) {
        this.xpos = xpos;
        this.ypos = ypos;
        this.radius = radius;
        this.color = color;
        this.dx = speed;
        this.dy = speed;
    } draw(ctx) {
        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.strokeStyle = this.color;
        ctx.arc(this.xpos, this.ypos, this.radius, 0, 360, false);
        ctx.stroke();
        ctx.closePath();
    } update(ctx) {
        this.draw(ctx);
        if (this.xpos + this.radius > window_width) {
            this.dx = -this.dx
        } if (this.xpos - this.radius < 0) {
            this.dx = -this.dx
        } if (this.ypos + this.radius > window_height) {
            this.dy = -this.dy
        } if (this.ypos - this.radius < 0) {
            this.dy = -this.dy
        }
        this.xpos += this.dx;
        this.ypos += this.dy;
    }
}
let myCircle = new circle(100, 100, 30, "red", 10);
myCircle.draw(ctx);
let updateCircle = function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    requestAnimationFrame(updateCircle);
    myCircle.update(ctx);
}
updateCircle(myCircle)
canvas {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}
<canvas id="canvas"></canvas>

Solution

  • For entire page you need to set margin:0 for body and html rather than the element itself which are not set by default for html pages:

    let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
var window_height = window.innerHeight;
var window_width = window.innerWidth;
canvas.width = window_width;
canvas.height = window_height;
canvas.style.background = "yellow";


class circle {
    constructor(xpos, ypos, radius, color, speed) {
        this.xpos = xpos;
        this.ypos = ypos;
        this.radius = radius;
        this.color = color;
        this.dx = speed;
        this.dy = speed;
    } draw(ctx) {
        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.strokeStyle = this.color;
        ctx.arc(this.xpos, this.ypos, this.radius, 0, 360, false);
        ctx.stroke();
        ctx.closePath();
    } update(ctx) {
        this.draw(ctx);
        if (this.xpos + this.radius > window_width) {
            this.dx = -this.dx
        } if (this.xpos - this.radius < 0) {
            this.dx = -this.dx
        } if (this.ypos + this.radius > window_height) {
            this.dy = -this.dy
        } if (this.ypos - this.radius < 0) {
            this.dy = -this.dy
        }
        this.xpos += this.dx;
        this.ypos += this.dy;
    }
}
let myCircle = new circle(100, 100, 30, "red", 10);
myCircle.draw(ctx);
let updateCircle = function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    requestAnimationFrame(updateCircle);
    myCircle.update(ctx);
}
updateCircle(myCircle)
    canvas {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}

body,html{
  margin:0
}
    <canvas id="canvas"></canvas>