Default Marker + Hue

Programmatically apply a hue rotation to an image defined as a data URI.

by David Iglesias

HTML

<h1>
  Default Marker + Hue
</h1>

<div class="center">
  <canvas id="output" width="54" height="86"></canvas>
  <p>
    <input type="range" min="0" max="360" id="hue-selector" value="0" />
    <br />
    <span id="hue-label">0 deg</span>
  </p>
</div>

CSS

* {
  font-family: sans-serif;
}

.center {
  text-align: center;
}

canvas {
  /* Checkered bg effect https://stackoverflow.com/a/51054396/1738205 */
  background-image:
    /* tint image */
    linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
    /* checkered effect */
    linear-gradient(to right, black 50%, white 50%),
    linear-gradient(to bottom, black 50%, white 50%);
  background-blend-mode: normal, difference, normal;
  background-size: 16px 16px;
}

JavaScript

const canvas = document.getElementById('output');
const hueRange = document.getElementById('hue-selector');
const hueLabel = document.getElementById('hue-label');
const ctx = canvas.getContext('2d');
const img = new Image();

function updateHue(hue) {
  ctx.filter = 'hue-rotate(' + hue + 'deg)';
  ctx.drawImage(img, 0, 0);
  ctx.filter = "none";
  hueLabel.innerText = hue + ' deg';
  hueRange.value = hue;
}

img.onload = function() {
  const randomHue = Math.floor(Math.random() * 360);
  updateHue(randomHue);

  hueRange.oninput = function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    updateHue(hueRange.value);
  }
};

img.src =...