Fit canvas size to background image size, keeping its aspect ratio

Question

I am currently developing an app allowing users to draw shapes top of an image.

I am using canvas with background-image set to url("uploaded image_url").

I am having trouble getting canvas size fitted to background image size and to the viewport size at once.

Consider the following snipper - a lot of the lower image is cropped:

.drawer-area {
  width: 90%;
  background-image: url("https://i.picsum.photos/id/430/200/300.jpg?hmac=souGSmvwQ6KlJgthGYBGSWB22Y7MpK5xlgLYwvtbXzg");
  background-size: cover;
}

<canvas class="drawer-area"></canvas>

Note, I don't know the size of the image beforehand. I am using background-size: cover and width: 90%, but it doesn't do the trick. Any advice?

https://stackoverflow.com/a/8486324/11729652 I guess this is what you're looking for) — David Gogua, Aug 14 '20 at 12:03
so you want the canvas to set it's width and height automatically according to the background-size? — KALITA, Aug 14 '20 at 12:09

score 0 · Answer 1 · answered Aug 14 '20 at 12:02

0

Have you tried using something like this on your style sheet? background: url("uploaded image_url") center center/ cover no-repeat; This should make the image fit into the container you've assigned it to, hope it helps!

answered Aug 14 '20 at 12:02

JardimJ

1
2

Fit canvas size to background image size, keeping its aspect ratio

1 Answers1