search

davidmz / apng-js

Parse and play animated PNG (APNG)
MIT License
317 stars 48 forks source link

Player scaling #15

Open JanWerder opened 4 years ago

JanWerder commented 4 years ago

The player currently doesn't scale the content of the canvas to the width & height of the canvas. This is relevant if i.e. the content of the buffers is larger than the canvas it's supposed to be rendered on. Can this be added, so that the canvas scales its content?

davidmz commented 4 years ago

I dont think that library should do it. The correct way to scale canvas is to always create canvas with the original APNG dimensions and scale it via CSS.

The canvas width and height defines the on-page dimensions AND the internal canvas coordinates. Unlike images, where width and height affects only on-page sizes but the internal image size fully defined by the image data themself.

Scaling image inside of canvas may cause unwanted artifacts. You can see it on demo page: upload some APNG and type in console document.querySelector("canvas").getContext('2d').scale(1.2, 1.2). You will see resized animation with visible artifacts.

JanWerder commented 4 years ago

From my testing, scaling it via CSS cuts the image rather than scaling it, because the drawImage on the canvas still operates with the original width and height of the frames.

davidmz commented 4 years ago

Could you show some minimal code?