#### Other Tools

```<!DOCTYPE html> ```
```<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> ```
```<meta charset="UTF-8"> ```
```<title>Canvas test: 2d.filter.layers.componentTransfer.table</title> ```
```<h1>2d.filter.layers.componentTransfer.table</h1> ```
```<p class="desc">Test pixels on CanvasFilter() componentTransfer with table type</p> ```
```<canvas id="canvas" width="100" height="100"> ```
``` <p class="fallback">FAIL (fallback content)</p> ```
```</canvas> ```
```<script> ```
``` const canvas = document.getElementById("canvas"); ```
``` const ctx = canvas.getContext('2d'); ```
``` ```
``` // From https://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement ```
``` function getTransformedValue(C, V) { ```
``` // Get the right interval ```
``` const n = V.length - 1; ```
``` const k = C == 1 ? n - 1 : Math.floor(C * n); ```
``` return V[k] + (C - k/n) * n * (V[k + 1] - V[k]); ```
``` } ```
``` ```
``` function getColor(inputColor, tableValues) { ```
``` const result = [0, 0, 0]; ```
``` for (const i in inputColor) { ```
``` const C = inputColor[i]/255; ```
``` const Cprime = getTransformedValue(C, tableValues[i]); ```
``` result[i] = Math.max(0, Math.min(1, Cprime)) * 255; ```
``` } ```
``` return result; ```
``` } ```
``` ```
``` tableValuesR = [0, 0, 1, 1]; ```
``` tableValuesG = [2, 0, 0.5, 3]; ```
``` tableValuesB = [1, -1, 5, 0]; ```
``` ```
``` const inputColors = [ ```
``` [255, 255, 255], ```
``` [0, 0, 0], ```
``` [127, 0, 34], ```
``` [252, 186, 3], ```
``` [50, 68, 87], ```
``` ]; ```
``` ```
``` for (let i = 0 ; i < inputColors.length ; ++i) { ```
``` const color = inputColors[i]; ```
``` let outputColor = getColor( ```
``` color, [tableValuesR, tableValuesG, tableValuesB]); ```
``` ctx.fillStyle = `rgb(\${outputColor[0]}, \${outputColor[1]}, ```
``` \${outputColor[2]})`; ```
``` ctx.fillRect(i * 10, i * 10, 10, 10); ```
``` } ```
```</script> ```