html-in-canvas/Examples/text-input.html at 00c822eb2dd3abf3d4a776071011f8e70f98eacc · WICG/html-in-canvas · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!doctype html>
<meta charset="utf-8" />
<title>Demo of interactive content in canvas</title>

<style>
  canvas {
    border: 1px solid blue;
    width: 638px;
    height: 318px;
  }
  form p {
    margin: 6px;
  }
</style>

<canvas id="canvas" width="638" height="318" layoutsubtree="true">
  <div id=draw_element style="width: 578px" >
    <form id="demo-form" action="#" method="get">
      <fieldset>
        <legend>🚀 Spaceship Control Panel</legend>
        <p>
          <label for="shipName">Ship Name:</label>
          <input type="text" id="shipName" value="The 'Canvas' Voyager">
        </p>
        <p>
          <input type="checkbox" id="hyperdrive" checked>
          <label for="hyperdrive">Engage Hyperdrive</label>
        </p>
        <fieldset>
          <legend>Target System</legend>
          <p>
            <input type="radio" id="alpha" name="system" value="alpha" checked>
            <label for="alpha">Alpha Centauri</label>
          </p>
          <p>
            <input type="radio" id="beta" name="system" value="beta">
            <label for="beta">Betelgeuse</label>
          </p>
        </fieldset>
        <p>
          <label for="shieldLevel">Shield Strength:</label>
          <input type="range" id="shieldLevel" min="0" max="100" value="75">
        </p>
        <p style="text-align: right; margin: 0;">
          <button type="submit">Launch!</button>
        </p>
      </fieldset>
    </form>
  </div>
</canvas>
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  canvas.onpaint = (event) => {
    ctx.reset();
    let x = canvas.width / 25;
    let y = canvas.height / 25;
    let transform = ctx.drawElementImage(draw_element, x, y);
    draw_element.style.transform = transform.toString();
  };
  canvas.requestPaint(); // Request an initial paint event.

  const observer = new ResizeObserver(([entry]) => {
    canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
    canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
  });
  observer.observe(canvas, {box: 'device-pixel-content-box'});
</script>