Thanks!
I was figuring this would be more complicated than one of the existing CSS image filters. The results almost look like an HSL value as the S for Saturation might be applicable? I wasnt really planning on doing this on a pixel by pixel redraw, rather apply to the whole image.
Do you think an HSL filter might be better? If anything I would rather have MORE functionality rather than less...
---
Edit: Got it, problem solved.
So yes, it IS possible to use an SVG with a Raster Image, apply an SVG filter (such as feColorMatrix), then draw that filtered image to an HTML5 Canvas element.
NOTE: I suck at SVG.
For anyone else that ends up here, the trick is to create a new Image, set an Event Listener for onload on the new Image() to handle drawing to your canvas, then set the matrix values on the feMatrix element, then set the image source (img.src = 'data:image/svg+xml;base64,' + btoa(svg.outerHTML).replace(/\=+$/, ''); ) to a base64 encoded string of your full SVG element (svg.outerHTML).
It appears to me so far that the onload event listener is needed as even though the data src may be base64 encoded, it appears to be considered as "not fully loaded" until the render with filters is complete.
It may also be necessary to wrap ctx.clearRect and ctx.drawImage in a setTimeout call. In my situation, I did not need it.
INLINE SVG HTML (contains a base64 data source for a Color Chip)
<svg id="colorChipSVG" width="73" height="118" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="colormatrix" x="0" y="0" width="1" height="1">
<feColorMatrix id="feMatrix" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" />
<feColorMatrix id="fs" type="saturate" values="1"/>
</filter>
<image id="svgImg" width="73" height="118" filter="url(#colormatrix)" xlink:href="data:image/png;base64,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" />
</svg>
Javascript
function drawColorChip(){
let tempImg = new Image();
tempImg.onload = function(){
ctx.clearRect(0, 0, ctx.width, ctx.height);
ctx.drawImage(tempImg, 0, 0, 73, 118);
};
tempImg.src = 'data:image/svg+xml;base64,' + btoa(svg.outerHTML).replace(/\=+$/, '');
}