Home/ Questions/Q 6967493
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T16:19:44+00:00

I want to resize the canvas element so that if fits its parent, whether

  • 0

I want to resize the canvas element so that if fits its parent, whether it’s <body> (“full-screen”) or some <div> for instance. This is my attempt:

// called at each frame
function update() {
    var canvasNode = document.getElementById('mycanvas');
    canvasNode.width = canvasNode.parentNode.clientWidth;
    canvasNode.height = canvasNode.parentNode.clientHeight;
}

For some reason, the canvas doesn’t stop growing! Maybe client* aren’t the right parameters?

See the code in action here:
http://jsfiddle.net/ARKVD/24/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The easiest thing to do is to always keep the canvas in its own div.

    The only thing that will ever be in this div is the canvas.

    Then you can use CSS to resize the div however you want. You want it as large as the body? Give the div width: 100%.

    Then you can always rightfully do:

    canvas.width = theDiv.clientWidth;
canvas.height = theDiv.clientHeight;

    If you do this you won’t have to worry about the weird issues that you’re currently facing when the body is the direct parent of the div.

    • 0