Support high DPI screens

[mxdvl]

What does this change?

This PR adds support for high-DPI screens. It has been tested locally.

Alternatively, you could use SVGs instead of canvas. I would be happy to create the work for this.

Screenshots

Before	After

Click images to see them at full resolution.

[p01]

It would be easier to size the canvas and form using CSS and the vmin unit ;)

[mxdvl]

@p01, can you explain a little further?

This proposal is only to render at double or triple resolution, but now changing the actual size on the screen.

vmin relates to the smallest of viewport width and height.

[p01]

Oh right! So there are two parts to making tixy work well on different screens sizes.

One that you address by update the width and height of the canvas, taking into account the DPR.
The other is about the size of the Canvas, and other elements, in CSS pixels, and that's where vmin ( or similar ) units come into play to make size things relative to the viewport size instead of absolute, and arbitrary, pixel sizes.

[p01]

TL;DR: We should skip the line setting the output.style.foo, and instead size the canvas and form elements using vmin or similar viewport unit.

With this change the size of the canvas will adapt to the DPR but not the actual viewport size. Furthermore, it can end up having a different size than the labels and form inputs below.

[p01]

Here's the type of CSS change I mean,

style.styl

html {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90%;
  background: #000;
  color: #fff;
}

body {
  margin: 0;
  width: 64vmin;
  height: 76vmin;
}

* {
  font-size: 2vmin;
  font-family: monospace;
  line-height: 2vmin;
}

canvas,form,input,label {
  padding: 0;
  background: transparent;
  width: 64vmin;
  display: block;
  margin: 0 auto;
  color: inherit;
  border: none; 
}

#output {
  height: 64vmin;
  margin-bottom: 4vmin;
  background: #222;
}

#comment * {
  color: #F24;
}

[mxdvl]

I think these are great suggestions, but probably for a subsequent PR

[p01]

Fair
I filed the PR #19 ;)

[mxdvl]

Thanks for the suggestions, making tixy work on different screen is outside the scope of this PR, however.

The solution of setting a width and height attributes that get overriden by CSS is documented in several places on the interner as the way handle high-DPI canvas rendering.

2012: https://www.html5rocks.com/tutorials/canvas/hidpi/

2014/17: https://stackoverflow.com/a/26047748

2011/19: https://gist.github.com/joubertnel/870190

2020 (?): https://www.kirupa.com/canvas/canvas_high_dpi_retina.htm

[p01]

See how the articles you mentioned only change the width and height, but leave the CSS resolution. ;)
We still need to remove the line 22, otherwise the layout will look weird in high DPRs.

[mxdvl]

@p01 I’ve tested this on Chrome desktop, mobile Safari, Firefox on high DPI devices (DPR: 2) and it works exactly as expected. I’ve added screenshots in the description to showcase.

Whether we set the width: 272px; via external CSS/.styl or inline styles, as with line 22, does not make much difference. I prefer setting it via JS, so it automatically updates if, say, the width were to change in the future.

[aemkei]

This looks super crisp! Thank you.

[mxdvl]

This looks super crisp! Thank you.

Thank YOU! https://tixy.land/?code=Math.sin%28x%2Bt*3%29%2BMath.cos%28y%2Bt*2%29