canvas-filter-object-component-transfer-expected.html

Enable keyboard shortcuts

<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>