<body>
  <canvas id="canvas" width="500" height="100"></canvas>
  <svg width="0", height="0">
    <defs>
      <filter color-interpolation-filters='sRGB' id="Identity" filterUnits="objectBoundingBox"
              x="0%" y="0%" width="100%" height="100%">
        <feComponentTransfer>
          <feFuncR type="identity"/>
          <feFuncG type="identity"/>
          <feFuncB type="identity"/>
          <feFuncA type="identity"/>
        </feComponentTransfer>
      </filter>
      <filter color-interpolation-filters='sRGB' id="Table">
        <feComponentTransfer>
          <feFuncR type="table" tableValues="0 2 0.5 1"/>
          <feFuncG type="table" tableValues="1 -1 5 0"/>
          <feFuncB type="table" tableValues="0 1 1 0"/>
        </feComponentTransfer>
      </filter>
      <filter color-interpolation-filters='sRGB' id="Discrete">
        <feComponentTransfer>
          <feFuncR type="discrete" tableValues="0 2 0.5 1"/>
          <feFuncG type="discrete" tableValues="1 -1 5 0"/>
          <feFuncB type="discrete" tableValues="0 1 1 0"/>
        </feComponentTransfer>
      </filter>
      <filter color-interpolation-filters='sRGB' id="Linear">
        <feComponentTransfer>
          <feFuncR type="linear" slope=".5" intercept=".25"/>
          <feFuncG type="linear" slope="1.5" intercept="0"/>
          <feFuncB type="linear" slope="-0.5" intercept=".5"/>
        </feComponentTransfer>
      </filter>
      <filter color-interpolation-filters='sRGB' id="Gamma">
        <feComponentTransfer>
          <feFuncR type="gamma" amplitude="2" exponent="5" offset="-0.5"/>
          <feFuncG type="gamma" amplitude="0.9" exponent="3" offset="0.3"/>
          <feFuncB type="gamma" amplitude="1.1" exponent="1" offset="0.1"/>
        </feComponentTransfer>
      </filter>
    </defs>
  </svg>
</body>
<script type="text/javascript">
  const ctx = document.getElementById("canvas").getContext("2d");

  const grad = ctx.createLinearGradient(10, 0, 490, 0);
  grad.addColorStop(0, "#f00");
  grad.addColorStop(0.33, "#0f0");
  grad.addColorStop(0.67, "#00f");
  grad.addColorStop(1, "#000");
  ctx.fillStyle = grad;

  ctx.filter = "url('#Identity')";
  ctx.fillRect(10, 10, 480, 10);
  ctx.filter = "url('#Table')";
  ctx.fillRect(10, 30, 480, 10);
  ctx.filter = "url('#Discrete')";
  ctx.fillRect(10, 50, 480, 10);
  ctx.filter = "url('#Linear')";
  ctx.fillRect(10, 70, 480, 10);
  ctx.filter = "url('#Gamma')";
  ctx.fillRect(10, 90, 480, 10);
</script>
