0 votes
1 view
in Web Technology by (40.4k points)

How can I automatically scale the HTML5 <canvas> element to fit the page?

For example, I can get a <div> to scale by setting the height and width properties to 100%, but a <canvas> won't scale, will it?

1 Answer

0 votes
by (20.3k points)

In JavaScript, try this:

/* important! for alignment, you should make things

 * relative to the canvas' current width/height.

 */

function draw() {

  var ctx = (a canvas context);

  ctx.canvas.width  = window.innerWidth;

  ctx.canvas.height = window.innerHeight;

  //...drawing code...

}

In CSS, use this:

html, body {

  width:  100%;

  height: 100%;

  margin: 0;

}

Welcome to Intellipaat Community. Get your technical queries answered by top developers !


Categories

...