Fit large HTML5 canvas inside window

Question

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.

`canvas { width: ...; height: ... }` -> [How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) — Andreas, Oct 31 '22 at 15:44
do you mean your canvas minimum width has to be 2000px and minimum height 4000px? — GrafiCode, Oct 31 '22 at 15:45
You can't put 10 gallons of water in to a 5 gallon bucket. Size the Canvas as you like, but it will only be fully visible to those who have a screen and resolution size that can accommodate it. Also, Canvas size should be set with HTML attributes (where no unit is used) and if you use CSS, you must supply a string with units (i.e., `style.width = "2000px"` — Scott Marcus, Oct 31 '22 at 15:47
The question requires more detail. Typically you have a buffer holding the full scale high resolution drawing and then a display canvas scaled to some zoom and pan value. Search SO for canvas zoom for details. — Yogi, Oct 31 '22 at 16:23
@Yogi what sort of details are you missing? I want to draw on a large canvas and then fit it to a window, like you would an image, scaled down from some size. — Erlend, Oct 31 '22 at 16:32
@Erlend Details , you're saying you know how to do it in JS but it doesn't seem like you actually do. It's unclear which part you're having a hard time. You did not show an attempt. You did not explain what went wrong. You waved your hands in the air comparing it to stretching an image but did not post any actual code of the behavior you're expecting. It's unclear what " i don't want to resize the canvas, but rather make it fit inside the window, like you would a large image." — Ruan Mendes, Oct 31 '22 at 17:06

score 1 · Accepted Answer · answered Oct 31 '22 at 17:01

1

You could rescale the canvas with CSS, for example:

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

and css

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

See also this JSFiddle

answered Oct 31 '22 at 17:01

Kokodoko

26,167
33
120
197

Thanks @Kokodoko ! I ended up setting 'width' to 'content-fit' but that answer pointed me in the right direction. – Erlend Oct 31 '22 at 17:47
@RuanMendes yes it seemed to me that the OP wanted the canvas to always be fully visible. Apparently that was the case so the answer is helpful, even though the question could have been worded better. – Kokodoko Nov 01 '22 at 09:08
@Kokodoko The problem is that the question and answer aren't helpful to others, only to the OP, there's no real learning here. If this is all the OP wanted, it should have been closed as a duplicate of [HTML Canvas Full Screen](https://stackoverflow.com/a/44389841/227299) This is adding noise to SO. – Ruan Mendes Nov 01 '22 at 14:05
Excuse me for helping the OP. – Kokodoko Nov 01 '22 at 15:05

Fit large HTML5 canvas inside window

1 Answers1