Make big image fit to canvas
Hi everyone, I'm trying to create a scratch effect using canvas.
I'm having problems understanding how to make the "hidden" pic to behave like an
object-fit: cover would... I know that I probably have to scale it, but I don't understand how. (https://stackoverflow.com/questions/23104582/scaling-an-image-to-fit-on-canvas)
https://codepen.io/n00bCod3r/pen/gbYwxBY Just hold LMB and scratch the image, you'll see the hidden one appear6 Replies
thats a very very sub-optimal and crude way of doing it
what you can do instead is to resize the image to fit inside the canvas, on the smallest dimension
for example, an image of 500x750 wont fit properly
if your canvas is 300x400, you have to resize proportionally for either the 500 or 750 to fit inside the canvas, and the rest spills over
the "spill over" will be hidden
you then have to draw the image at
0,-50% the spillover or -50% the spillover,0
assume that you resize and there are 70 pixels that will be outside the viewing are: you draw it at 0,-35 or -35,0 - depending on the dimension that fit inside the canvas
this effectively centers the image
by the way: DO NOT USE FRACTIONAL POSITIONS
the performance of the canvas will be sub-optimal and everything will be extra blurryOk I'll try, btw both the hidden pic and the hiding pic will have the exact same size and aspect ratio of 1:1
background-size: cover; seems to work, but it doesn't on my actual site :\how did you made it work?
Oh sorry, I forget to check if I'm not pinged. As I said
background-size: cover; worked, on my website too after I recompiled my scssprobably a cache problem then?
Yeah it's possible