Aligning canvas to image
This commit is contained in:
parent
345934c2f3
commit
3947aafeba
1 changed files with 6 additions and 2 deletions
|
@ -144,10 +144,14 @@ const StillImage = {
|
|||
|
||||
// Use requestAnimationFrame to schedule the scaling to the next frame
|
||||
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
|
||||
const ratio = window.devicePixelRatio || 1;
|
||||
canvas.width = parentElement.clientWidth * ratio;
|
||||
canvas.height = parentElement.clientHeight * ratio;
|
||||
canvas.width = image.naturalWidth * scalingRatioWidth * ratio;
|
||||
canvas.height = image.naturalHeight * scalingRatioHeight * ratio;
|
||||
canvas.style.width = `${parentElement.clientWidth}px`;
|
||||
canvas.style.height = `${parentElement.clientHeight}px`;
|
||||
context.scale(ratio, ratio);
|
||||
|
|
Loading…
Reference in a new issue