Applying (not just displaying) Changes To An Image Made By A Combination of CSS and SVG Filters

[AARRGGHHH]

CSS and SVG filters can be used to change the appearance of an image on a canvas. However (with CSS at least, I assume it is the same with SVG) the image is not actually changed, just the display of the image is altered. To change the image, you have to copy it to a new canvas and apply the old canvas as a filter:

    var cP = document.getElementById("cPreview");
    var cntxCP = cP.getContext("2d");
    
    var cS = document.getElementById("cSave");
    var cntxCS = cS.getContext("2d");
    
    // take whatever CSS filter(s) is/are applied to the first canvas
    var cssFilter = getComputedStyle(cP).filter;  // Get filter(s) from first canvas / image 

    // use that filter as the second canvas' context's filter
    cS.width = cP.width; 
    cS.height = cP.height; 
    cntxCS.filter = cssFilter;  // Apply filter(s) to second canvas / image 
            
    // This changes the image, instead of just changing the display of the image. EXCEPT iOS...  "Compliance" is still just a fantasy at Apple...  

My question is, once a combination of CSS and SVG filters have changed the appearance of an image, what steps have to be taken to apply those changes to the actual image (as was done above with CSS alone).

Please provide sample code, as I’m completely new to SVG Filters.

Thank you!

[AARRGGHHH]

Hopefully some additional info will help me find a resolution. Stepping through the code, the SVG filter is fine until I apply the CSS filters. Then, the SVG effect disappears. Here is the relevant code:

`

  <style>

      #cPreview {  filter: url("#svgCOLOR");  }
      #cSave {  filter: url("#svgCOLOR");  }
  
   </style>

    <!-- SVG Declaration -->
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" width="2" height="1">
      <defs>
        <filter id="svgCOLOR">
          <!-- Matrix values will eventually be adjustable using a range slider control -->
          <feColorMatrix type="matrix" values="2 0 0 0 0  0 1 0 0 0  0 0 2 0 0  0 0 0 0 1" />
        </filter>
      </defs>
    </svg>   

    <!-- CANVAS cPreview -->
    <!-- Tried foreignObject but it produced no changes -->                      

    <canvas id="cPreview" width="2" height="1" style="position:relative; max-width:100%;"></canvas>

    <!-- CANVAS cSave -->
    <canvas id="cSave" width="2" height="1" onclick="clickPreview()" style="position:relative; max-width:100%;"></canvas>

    <!-- THE PROBLEM -->
    <!-- When stepping through code, SVG works fine until this line fires.  I have tried adding SVG code to this line with no luck (I may have used incorrect syntax, I do not know -->

if (document.getElementById("cPreview") != null) document.getElementById("cPreview").style.filter = "brightness(" + parseInt(percentB) + "%)" + " contrast(" + parseInt(percentC) + "%)" +  " saturate(" + parseInt(percentS) + "%)"; 

    <!-- SVG Filter is replaced with CSS Filters --> 

Hope someone can help. Thank you