D3 Examples - Gradual pixelation

xxxxxxxxxx
 
<!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>
​
    