deferred.js

let skip = 5;
let img = 502;

const canvas = document.querySelector('#thing');
const ctx = canvas.getContext('2d')
const h = window.innerHeight;
const w = window.innerWidth;
canvas.setAttribute('width', w);
canvas.setAttribute('height', h);

function getDefaultImage(){
  //skip++;
  return `https://unsplash.it/${w}/${h}/?image=${img++}`;
}

function getImageData(i){
  const wc = document.createElement('canvas');
  const wctx = wc.getContext('2d');
  wc.setAttribute('height', i.height);
  wc.setAttribute('width', i.width);
  wctx.drawImage(i,0,0);
  return wctx.getImageData(0,0,i.width,i.height);
}

function getImage(asData = false, src = getDefaultImage()){
  // https://unsplash.it/512/512/?random
  return new Promise(function(res, rej) {
    const i = new Image();
    i.crossOrigin = 'anonymous';
    i.src = src;
    i.onload = res.bind(null, i, 'hi');
    i.onerror = rej;
  })
  .then(i => asData ? getImageData(i) : i);
}

function lux(p) {
  return p.rgba.reduce((t,c)=>{
    return t + c
  },0) / (255 * 3);
}

function paintPoint(p){
  const l = lux(p) * skip * 3;
  ctx.fillStyle = `rgba(${p.rgba.join()})`;
  ctx.fillRect(p.x - l/2, p.y - l / 2, l, l);
}

function paintPoints(points) {
   points.forEach(function(p) {
      ctx.fillStyle = `rgba(${p.rgba.join()})`;
      ctx.fillRect(p.x, p.y, skip, 2);
    });
}

function randInt(max) {
  return Math.floor(Math.random() * max);
}


function doStuff(){
  if (document.body.className === 'loading') {
     return;
  }
  document.body.className = 'loading';

  getImage(true)
    .then(function(i){
      canvas.setAttribute('width', w);
      canvas.setAttribute('height', h); 
      document.body.className = '';
      
      const points = [];
      return new Promise(function(res) {
        const idl = i.data.length / 4;
        
        function getPoint(n){
          const shouldDefer = n % 7000 === 0;
          
          if (n >= idl) {
            return res(points);
          }
          const col = n % w;
          const row = Math.floor(n / idl * h);
          if (col % skip !== 0 || row % skip !== 0) {
            if (shouldDefer){
              return requestAnimationFrame(getPoint.bind(null, n + 1));
            } else {
              return getPoint(n+1)
            }
          }
          const os = n * 4;
          const rgba = [i.data[os],i.data[os+1],i.data[os+2], 0.6]
          const p = {x: col, y: row, rgba};
          paintPoint(p);
          points.push(p);          
          if (n < idl) {
            if (shouldDefer){
              return requestAnimationFrame(getPoint.bind(null, n + 1));
            } else {
              return getPoint(n+1)
            }
          }
        }
        
        getPoint(0);
      })
    })
    //.then(paintPoints)
    .then(function(){
      setTimeout(doStuff, 3000);
    })
    .catch(err => {console.log(err); document.body.className = ''; doStuff()});
}

doStuff();

canvas.addEventListener('click', doStuff);