sliver/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Pull requests Activity

Aligning canvas to image

Browse source
This commit is contained in:
Mergan 2023-09-12 04:08:47 -07:00
parent 345934c2f3
commit 3947aafeba
1 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/still-image/still-image.js
View file

@ -144,10 +144,14 @@ const StillImage = {
// Use requestAnimationFrame to schedule the scaling to the next frame // Use requestAnimationFrame to schedule the scaling to the next frame
requestAnimationFrame(() => { requestAnimationFrame(() => {
// Compute scaling ratio between the natural dimensions of the image and its display dimensions
const scalingRatioWidth = parentElement.clientWidth / image.naturalWidth;
const scalingRatioHeight = parentElement.clientHeight / image.naturalHeight;
// Adjust for high-DPI displays // Adjust for high-DPI displays
const ratio = window.devicePixelRatio || 1; const ratio = window.devicePixelRatio || 1;
canvas.width = parentElement.clientWidth * ratio; canvas.width = image.naturalWidth * scalingRatioWidth * ratio;
canvas.height = parentElement.clientHeight * ratio; canvas.height = image.naturalHeight * scalingRatioHeight * ratio;
canvas.style.width = `${parentElement.clientWidth}px`; canvas.style.width = `${parentElement.clientWidth}px`;
canvas.style.height = `${parentElement.clientHeight}px`; canvas.style.height = `${parentElement.clientHeight}px`;
context.scale(ratio, ratio); context.scale(ratio, ratio);