Crisp pixel art look with image-rendering: missing consideration of scaling with ctx.scale()

[MironFoerster]

MDN URL

https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

When the canvas context is scaled using ctx.scale() the crispness of the edges is lost. The article doesn't take this case into consideration at all and doesn't provide a guide on how to solve this problem.

What did you expect to see?

It would be great to include a guide on how to keep edges crisp even with ctx.scale(). A way to do this would be to increase the resolution of the canvas by increasing its html width&height while keeping the css width&height and/or increase the resolution of the image

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/games/techniques/crisp_pixel_art_look
• MDN URL: https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/games/techniques/crisp_pixel_art_look/index.md
• Last commit: 1058bb1
• Document last modified: 2022-10-21T07:12:14.000Z