canvas-filter-object-component-transfer.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/canvas/element/manual/filters/tentative/canvas-filter-object-component-transfer.html - WPT Dashboard Interop Dashboard

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

    name: "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({

    name: "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({

    name: "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({

    name: "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({

    name: "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>