Skip to content

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

Open
@MironFoerster

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Content:GamesGames docshelp wantedIf you know something about this topic, we would love your help!

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions