CODEWITHSUNDEEP
javascriptcanvas
Alexey Rogov
Alexey Rogov

Reputation: 3

Resize browser window fill canvas dynamically

When change the window size is not going to fill canvas with the gradient...

window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {

            canvas.width = window.innerWidth;
              canvas.height = window.innerHeight;
            draw();

    }
    resizeCanvas();

http://codepen.io/tworog/pen/jVoYrz

Please help.

Upvotes: 0

Views: 88

Answers (2)

LZNPDE
LZNPDE

Reputation: 164

The canvas size is already being updated.

In order to get rid of the gradient you need to change Line 48, so that size of the rectangle matches the canvas.

ctx.fillRect(0,0,canvas.width,canvas.height);

Upvotes: 0

Soviut
Soviut

Reputation: 91525

You don't need javascript to accomplish this, you can just use css. (I made the canvas blue in the following example to prove it's filling the entire page)

canvas {
  background: cornflowerblue;
}

html, body, canvas {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
<canvas></canvas>

Upvotes: 1

Related Questions