You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
Create a design function with @mechanic-design/engine-canvas that is 400x400
Press "generate"
See the fuzzy out because the canvas should really be 800x800
Expected behavior
A clear and beautiful output no matter the screen :)
Screenshots
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.
The text was updated successfully, but these errors were encountered:
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:
@mechanic-design/engine-canvas
that is 400x400Expected behavior
A clear and beautiful output no matter the screen :)
Screenshots
Desktop (please complete the following information):
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, runscale(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.The text was updated successfully, but these errors were encountered: