How to put a web page under water

Put the page inside a canvas

Normally a canvas only draws shapes and pictures. Chrome's new HTML-in-Canvas lets you put real HTML inside one and paint it yourself. The browser still lays it out, so it keeps working like normal HTML, but nothing shows until you draw it.

<canvas id="stage" layoutsubtree content="drawable">
  <form id="card" drawable>
    <input placeholder="Your name">
    <button>Say hi</button>
  </form>
</canvas>

<script>
  const ctx = stage.getContext("2d");
  stage.onpaint = () => {
    ctx.reset();
    ctx.drawElementImage(card, 0, 0);
  };
</script>

Bend the pixels

Once the page is pixels, you can hand them to WebGL and do anything a shader can do. Here every pixel is read from a slightly wavy spot. CSS can move and tilt a page, but it can't do this.

// copy the 2D canvas into a WebGL texture after each paint
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
  gl.UNSIGNED_BYTE, stage);

// fragment shader: read each pixel from a wavy spot
vec2 q = uv;
q.x += sin(uv.y * 18. + time) * .012 * wobble;
q.y += sin(uv.x * 13. + time) * .01 * wobble;
gl_FragColor = texture2D(page, q);

Make it react

The wobble gets interesting when it comes from you. Under the card is a grid of water heights. Moving your pointer drops pebbles, the waves spread, and the slope of the water bends the page. That's the whole Wishing Pond.

// a grid of water heights; your pointer drops pebbles
heights[i] += 40;

// each frame, every cell becomes the average of its
// neighbours minus where it was: waves spread and fade
next[i] = (left + right + up + down) / 2 - prev[i];
next[i] *= 0.975;

// in the shader, the slope of the water bends the page
vec2 slope = vec2(right - left, up - down);
gl_FragColor = texture2D(page, uv + slope * .18);

Ship it to everyone

HTML-in-Canvas is still an experiment, so normal Chrome only turns it on for sites that ask. Asking is free and takes two minutes.

1. Register your sitePick HTML-in-Canvas on Chrome Origin Trials and enter your domain. You get a token.2 min
2. Add the tokenOne meta tag in the page head, or an Origin-Trial header.1 min
3. Check before you drawTest for drawElementImage and show the plain page where it's missing.5 min
4. Test it for realOpen it in normal desktop Chrome. Safari, Firefox and phones get the plain page.1 min

<meta http-equiv="origin-trial" content="YOUR_TOKEN">

<script>
  const works = "drawElementImage" in CanvasRenderingContext2D.prototype;
  if (!works) {
    // Safari, Firefox and phones: show the page as it is
  }
</script>

Questions

See the full ones

Wishing Pond: a form at the bottom of a koi pond. Type a wish, toss a coin, watch your words sink.

Snowfall: a form standing in the snow. Snow settles on its fields and letters, and you can brush it off.

Margin Dragon: a watercolour dragon swims through a page of real text, and its fire burns holes in it.