hidpi canvas stuff

1 files changed, 32 insertions, 20 deletions

diff --git a/client/draw.js b/client/draw.js
index ef66e22..3aff6a4 100644
--- a/client/draw.js
+++ b/client/draw.js
@@ -3,46 +3,58 @@ import {
   randint, randrange, clamp, mod,
 } from './lib/util'
 
+import './lib/vendor/hidpi-canvas'
+
 import mouse from './lib/mouse'
 import color from './lib/color'
 
 let w, h
 let rx, ry
 
-const pixels_per_second = 1024
+const pixels_per_second = 512 // 1024
 
 const canvas = document.createElement('canvas')
-const ctx = canvas.getContext('2d')
-
-const scratch = document.createElement('canvas')
-const scratchCtx = scratch.getContext('2d')
-
 document.body.appendChild(canvas)
 document.body.addEventListener('resize', resize)
 resize()
 recenter()
 requestAnimationFrame(animate)
 
+// must request context after resizing
+const ctx = canvas.getContext('2d')
+
+const scratch = document.createElement('canvas')
+const scratchCtx = scratch.getContext('2d-lodpi')
+
 function resize(){
   w = canvas.width = window.innerWidth
   h = canvas.height = window.innerHeight
-  clear()
+  canvas.style.width = window.innerWidth + 'px'
+  canvas.style.height = window.innerHeight + 'px'
 }
 function recenter(){
   rx = randint(w), ry = randint(h)
 }
+let frame = null
+function onFrame(fn){
+  frame = fn
+}
 function animate(t){
   requestAnimationFrame(animate)
-  ctx.save()
-  ctx.globalAlpha = 0.0001
-  ctx.translate(w/2, h/2)
-  ctx.rotate(0.1)
-  ctx.translate(-rx, -ry)
-  ctx.drawImage(canvas, 0, 0)
-  ctx.restore()
+  if (frame) {
+    frame(t)
+    frame = null
+  }
+  // ctx.save()
+  // ctx.globalAlpha = 0.0001
+  // ctx.translate(w/2, h/2)
+  // ctx.rotate(0.1)
+  // ctx.translate(-rx, -ry)
+  // ctx.drawImage(canvas, 0, 0)
+  // ctx.restore()
 }
 function clear(n, x, y, ww, hh){
-  ctx.fillStyle = 'rgba(255,255,255,' + (n || 0.5) + ')'
+  ctx.fillStyle = 'rgba(255,255,255,' + (n || 0.9) + ')'
   ctx.fillRect(x || 0, y || 0, ww || w, hh || h)
   recenter()
 }
@@ -161,10 +173,10 @@ function spectrum(spec, x0, y0, ww, hh){
 
   var pcm_length = spec.fft_overlap * spec_len
 
-  x0 = x0 || 0
-  y0 = y0 || Math.floor(h/4)
-  ww = ww || window.innerWidth
-  hh = hh || h/4
+  x0 = x0 * devicePixelRatio || 0
+  y0 = y0 * devicePixelRatio || Math.floor(h/4)
+  ww = ww * devicePixelRatio || w
+  hh = hh * devicePixelRatio || h/4
 
   const width = Math.round(pcm_length / spec.sr * pixels_per_second)
   const height = Math.floor(hh)
@@ -176,7 +188,7 @@ function spectrum(spec, x0, y0, ww, hh){
 }
 
 export default {
-  canvas, ctx,
+  canvas, ctx, onFrame,
   triangle, clear, line, dot,
   waveform, spectrum
 }
\ No newline at end of file