title: Dynamically change feColorMatrix values for canvas
body: <p>I am using an SVG filter with <code>feColorMatrix</code> in a canvas 2D rendering context. I would like to be able to dynamically update the matrix's <code>values</code> attribute, to dynamically change the color mapping. However, when I use <code>setAttribute</code> to update the matrix, it has no effect on subsequent draws to the canvas.</p>
  <p>The example below reproduces the problem. The matrix initially swaps the red and green channels, and this filter is applied correctly so that the square on the left is drawn in green instead of red. The expected result is that after changing the filter's <code>values</code> attribute to the <code>redToBlue</code> matrix, the square on the right should be drawn in blue; the actual result is that the square on the right remains green despite updating the matrix values.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let redToBlue = '0 0 1 0 0  0 1 0 0 0  1 0 0 0 0  0 0 0 1 0';
  
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  let filter = document.getElementById('filter');
  
  ctx.fillStyle = 'red';
  ctx.filter = 'url(#filter)';
  ctx.fillRect(10, 10, 80, 80);
  filter.setAttribute('values', redToBlue);
  ctx.fillRect(110, 10, 80, 80);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg&gt;
    &lt;filter id="filter"&gt;
      &lt;feColorMatrix type="matrix" values="0 1 0 0 0  1 0 0 0 0  0 0 1 0 0  0 0 0 1 0" /&gt;
    &lt;/filter&gt;
  &lt;/svg&gt;
  &lt;canvas id="canvas" width="200" height="100"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://jsfiddle.net/dnju07y2/1/" rel="nofollow noreferrer">JSFiddle link</a></p>
  <p>I have tried <code>filter.values = ...</code> instead of <code>setAttribute</code>, re-assigning <code>ctx.filter = 'url(#filter)'</code> after updating the attribute, and resetting the canvas or SVG width to &quot;force&quot; an update; these had no effect.</p>
  <p>Ideally I am looking for a solution which doesn't require creating a new <code>filter</code> or <code>feColorMatrix</code> element and adding it to the DOM. In the real application, the matrix values will be dynamically computed, so it is not possible to pre-write the different filters and just switch between them based on <code>id</code>.</p>