Fit large HTML5 canvas inside window-CodePudding

I would like to fit a large HTML5 canvas, e.g. 2000px x 4000px, where i draw some high resolution art, inside the current window which might have a smaller resolution. I set the canvas in Javascript, but how would a style.css look like?

Javascript:

  canvas = document.getElementById("c")

  canvas.width = 2000
  canvas.height = 4000

Notice, i don't want to resize the canvas, but rather make it fit inside the window, like you would a large image.

CodePudding user response：

You could rescale the canvas with CSS, for example:

<div>
   <canvas>
   </canvas>
</div>

and css

canvas {
    width:100%;
    height:100%;
}