Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fuzzy engine-canvas function on retina #141

Open
runemadsen opened this issue Sep 2, 2022 · 0 comments
Open

Fuzzy engine-canvas function on retina #141

runemadsen opened this issue Sep 2, 2022 · 0 comments
Labels
bug:bug: Something isn't working

Comments

@runemadsen
Copy link
Contributor

Describe the bug
The canvas element for @mechanic-design/engine-canvas looks fuzzy on retina screen because of the 2-pixel density required.

To Reproduce
Steps to reproduce the behavior:

  1. Create a design function with @mechanic-design/engine-canvas that is 400x400
  2. Press "generate"
  3. See the fuzzy out because the canvas should really be 800x800

Expected behavior
A clear and beautiful output no matter the screen :)

Screenshots
Screen Shot 2022-09-02 at 11 54 40 AM

Desktop (please complete the following information):

  • OS: OSX
  • Browser Chrome
  • Version All

Additional context
I think the solution should be that when a design function made with @mechanic-design/engine-canvas is rendered for preview (only), we should double the size of the canvas, run scale(2, 2) on the context, and use CSS to show the canvas at the normal size. This technique is explained here. If the user presses "generate" to download a file, the file should be normal size.

@runemadsen runemadsen added the bug:bug: Something isn't working label Sep 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug:bug: Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant