dirty-rectangle-rendering/index.html at main · m2-md/dirty-rectangle-rendering · 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dirty Rectangle Rendering Optimization for Canvas 2D</title>
    <style>
      body {
        margin: 0;
        min-height: 100vh;
        background: #0f172a;
        color: #e2e8f0;
        font-family: system-ui, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 24px 12px;
      }
      h1 {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
      }
      .stage {
        position: relative;
        width: 640px;
        height: 360px;
        background: #0b1220;
        border: 1px solid #334155;
      }
      .stage canvas {
        position: absolute;
        inset: 0;
      }
      .panel {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        align-items: center;
        justify-content: center;
        max-width: 660px;
        font-size: 13px;
      }
      .panel label {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      #hud {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        line-height: 1.6;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 6px;
        padding: 10px 14px;
        min-width: 340px;
      }
      #hud b {
        color: #38bdf8;
      }
      .hint {
        max-width: 640px;
        color: #94a3b8;
        font-size: 12px;
        line-height: 1.6;
      }
    </style>
  </head>
  <body>
    <h1>Dirty rectangle rendering — clear only what changed</h1>

    <!-- Layered canvas: bottom layer static, top layer moving -->
    <div class="stage">
      <canvas id="bg" width="640" height="360"></canvas>
      <canvas id="fg" width="640" height="360"></canvas>
    </div>

    <div class="panel">
      <label>
        mode
        <select id="mode">
          <option value="dirty-rect">dirty-rect</option>
          <option value="full-redraw">full-redraw</option>
          <option value="layered">layered</option>
        </select>
      </label>
      <label>
        moving <input id="moving" type="range" min="0" max="400" value="20" />
        <span id="movingOut">20</span>
      </label>
      <label>
        maxWaste
        <input id="maxWaste" type="range" min="0" max="32000" step="500" value="2000" />
        <span id="maxWasteOut">2000</span>
      </label>
      <label>
        <input id="visualize" type="checkbox" /> outline dirty regions
      </label>
      <label><input id="pad" type="checkbox" checked /> AA padding (1px)</label>
    </div>

    <div id="hud"></div>

    <p class="hint">
      Uncheck <b>pad</b>: the dirty rectangle is clipped to exact geometric bounds,
      leaving faint anti-aliasing artifacts behind moving objects. When visualization is
      enabled, red outline boxes are marked dirty in the subsequent frame so they do not
      accumulate on screen.
    </p>

    <script type="module" src="/src/main.ts"></script>
  </body>
</html>