Gradual pixelation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
</head>
<body>
<canvas width="960" height="500"></canvas>
<script>

var canvas = document.querySelector("canvas"),
    offscreen = document.createElement("canvas"),
    context = canvas.getContext("2d"),
    offscreenContext = offscreen.getContext("2d"),
    width = offscreen.width = canvas.width,
    height = offscreen.height = canvas.height,
    grain = 64,
    up = true,
    img = new Image();

context.msImageSmoothingEnabled = false;
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;

img.onload = draw;
img.src = "neon.jpg";

function draw() {

var dx = Math.round(width / grain),
      dy = Math.round(height / grain),
      delay = 25;

context.clearRect(0, 0, width, height);
  offscreenContext.clearRect(0, 0, width, height);
  offscreenContext.drawImage(img, 0, 0, width, height, 0, 0, dx, dy);
  context.drawImage(offscreen, 0, 0, dx, dy, 0, 0, width, height);

up ? grain-- : grain++;
  if (grain === 64 || grain === 1) {
    up = !up;
    delay = 500;
  }
  setTimeout(draw, delay);

}

</script>