<head>
    <link rel="match" href="canvas-filter-object-component-transfer-expected.html">
</head>
<body>
  <canvas id="canvas" width="500" height="100"></canvas>
</body>
<script>
  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;

  const identityFilter = new CanvasFilter({
    filter: "componentTransfer",
    funcR: {type: "identity"},
    funcG: {type: "identity"},
    funcB: {type: "identity"},
    funcA: {type: "identity"},
  });
  ctx.filter = identityFilter;
  ctx.fillRect(10, 10, 480, 10);

  const tableFilter = new CanvasFilter({
    filter: "componentTransfer",
    funcR: {type: "table", tableValues: [0, 2, 0.5, 1]},
    funcG: {type: "table", tableValues: [1, -1, 5, 0]},
    funcB: {type: "table", tableValues: [0, 1, 1, 0]},
  });
  ctx.filter = tableFilter;
  ctx.fillRect(10, 30, 480, 10);

  const discreteFilter = new CanvasFilter({
    filter: "componentTransfer",
    funcR: {type: "discrete", tableValues: [0, 2, 0.5, 1]},
    funcG: {type: "discrete", tableValues: [1, -1, 5, 0]},
    funcB: {type: "discrete", tableValues: [0, 1, 1, 0]},
  });
  ctx.filter = discreteFilter;
  ctx.fillRect(10, 50, 480, 10);

  const linearFilter = new CanvasFilter({
    filter: "componentTransfer",
    funcR: {type: "linear", slope: 0.5, intercept: 0.25},
    funcG: {type: "linear", slope: 1.5, intercept: 0},
    funcB: {type: "linear", slope: -0.5, intercept: 0.5},
  });
  ctx.filter = linearFilter;
  ctx.fillRect(10, 70, 480, 10);

  const gammaFilter = new CanvasFilter({
    filter: "componentTransfer",
    funcR: {type: "gamma", amplitude: 2, exponent: 5, offset: -0.5},
    funcG: {type: "gamma", amplitude: 0.9, exponent: 3, offset: 0.3},
    funcB: {type: "gamma", amplitude: 1.1, exponent: 1, offset: 0.1},
  });
  ctx.filter = gammaFilter;
  ctx.fillRect(10, 90, 480, 10);
</script>
