Como fazer a tela não ficar uma merda na retina

Isso pode poupar uma hora de se perguntar por que diabos a tela parece difusa!?!

Primeiro, faça seu elemento de tela duas vezes maior do que você deseja, mas defina seus estilos de largura e altura para o tamanho de destino. Por exemplo, se você deseja que um elemento de tela tenha 500 pontos de largura por 375 pontos de altura, faça o seguinte:

canvas = document.getElementById('output')
canvas.width = 1000;
canvas.height = 750;
canvas.style.width = "500px";
canvas.style.height = "375px";

Se você olhar para a sua tela agora, ela parecerá muito pequena (metade do tamanho para ser exato). Isso ocorre porque o contexto do desenho da tela está desenhando em escala normal e a retina tem o dobro disso. Então, você só precisa dimensionar o contexto de desenho 2 vezes:

canvas.getContext('2d').scale(2,2)

ESTRONDO. Linda tela.