<canvas id="$in2"></canvas>
  <input id="$bg1" value="0 0 0" />
  <input id="$bg2" value="255 255 255" />
  <canvas id="$out"></canvas>
  <a href="/post/202107231958/#solution">How to use?</a>
</body>

<script>
  for (const el of [$in1, $in2, $out])
    [el.height, el.width] = [el.clientHeight, el.clientWidth];
  $in1.onclick = $in2.onclick = ({ target: canvas }) => {
    const img = new Image();
    img.onload = () => {
      canvas.width = img.width;
      canvas.height = img.height;
      canvas.getConte