<!DOCTYPE html>
<html>
  <title>WebGPU canvas_complex (ref)</title>
  <meta charset="utf-8" />
  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
  <canvas id="cvs0" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
  <canvas id="cvs1" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
  <canvas id="cvs2" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
  <script>
    function draw(ctx) {
      ctx.fillStyle = '#660000';
      ctx.fillRect(0, 0, 10, 10);
      ctx.fillStyle = '#006600';
      ctx.fillRect(10, 0, 10, 10);
      ctx.fillStyle = '#000066';
      ctx.fillRect(0, 10, 10, 10);
      ctx.fillStyle = '#666600';
      ctx.fillRect(10, 10, 10, 10);
    }

    draw(cvs0.getContext('2d'));
    draw(cvs1.getContext('2d'));
    draw(cvs2.getContext('2d'));

  </script>
</html>
