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 !