Search code examples
javascripthtmlgame-developmentwindow-resize

How do you make a canvas change size when resizing and remove side bar?

There might also be other issues but I'm just trying to make a platformer in JavaScript, if you have any solutions thank you so much!

If this is something I could have researched on my own please let me know about it as I am not great at JavaScript and normally look at google for answers.

var canvas = document.getElementById("canvas");
var render = canvas.getContext("2d");
var width;
var height;
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
canvas.style.left = "0px";
canvas.style.top = "0px";
canvas.style.absolute = "0px";

window.onresize = function() {
    var width;
    var height;
    width = window.innerWidth;
    height = window.innerHeight;
}

function rectangle(x, y, w, h) {
    render.beginPath();
    render.rect(x, y, w, h);
    render.fill();
    render.stroke();
}

function fillColor(r, g, b) {
    r = String(r);
    g = String(g);
    b = String(b);
    render.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
}

function strokeColor(r, g, b) {
    r = String(r);
    g = String(g);
    b = String(b);
    render.strokeStyle = "rgb(" + r + "," + g + "," + b + ")";
}

function strokeSize(size) {
    render.lineWidth = String(size);
}

function background(r, g, b) {
    fillColor(r, g, b);
    rectangle(0, 0, width, height);
}

background(25, 25, 25);
fillColor(0, 123, 0);
strokeColor(0, 0, 123);
strokeSize(6);
rectangle(25, 25, 50 , 50);
<!DOCTYPE html>
<html>
<head>
    <canvas id="canvas"></canvas>
    <script type="text/javascript" src="main.js"></script>
</head>
<body></body>
</html>

Solution

  • Here's the answer version of the comment chain from above.

    To remove the scrollbars, add the following CSS, which removes the margin from the window. You have extra white space surrounding the canvas as well, which you can either remove, or make irrelevant with font-size: 0;

    body {
  margin: 0;
  font-size: 0;
}

    To resize the canvas, firstly remove the redeclaration of the width and height vars inside the onresize function, add the actual resizing code:

    canvas.width = width;
canvas.height = height;

    And finally, redraw the contents of the canvas after resize, since resizing clears the canvas. As a side note, updating the canvas size by using style attributes will not clear the canvas, but it will stretch it and the results are usually undesirable.

    var canvas = document.getElementById("canvas");
var render = canvas.getContext("2d");
var width;
var height;
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
canvas.style.left = "0px";
canvas.style.top = "0px";
canvas.style.absolute = "0px";

window.onresize = function() {
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;
    
    background(25, 25, 25);
    fillColor(0, 123, 0);
    strokeColor(0, 0, 123);
    strokeSize(6);
    rectangle(25, 25, 50 , 50);
}

function rectangle(x, y, w, h) {
    render.beginPath();
    render.rect(x, y, w, h);
    render.fill();
    render.stroke();
}

function fillColor(r, g, b) {
    r = String(r);
    g = String(g);
    b = String(b);
    render.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
}

function strokeColor(r, g, b) {
    r = String(r);
    g = String(g);
    b = String(b);
    render.strokeStyle = "rgb(" + r + "," + g + "," + b + ")";
}

function strokeSize(size) {
    render.lineWidth = String(size);
}

function background(r, g, b) {
    fillColor(r, g, b);
    rectangle(0, 0, width, height);
}

background(25, 25, 25);
fillColor(0, 123, 0);
strokeColor(0, 0, 123);
strokeSize(6);
rectangle(25, 25, 50 , 50);
    body{
  margin: 0;
  font-size: 0;
}
    <!DOCTYPE html>
<html>
<head>
    <canvas id="canvas"></canvas>
    <script type="text/javascript" src="main.js"></script>
</head>
<body></body>
</html>