JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Orginal</h2>
<img src="https://lh3.googleusercontent.com/-3aQKtylD9l4/UTsnK80IA1I/AAAAAAAAcbs/h8m5qkrHYBU/s512/_DSC7605.jpg" width="341"  height="512" />

<h2>SVG Sepia Filter strength 100%</h2>
<svg version="1.2" baseProfile="tiny" style="width: 341px; height: 512px;">
<defs>
    <filter id="image1362918248406filter" color-interpolation-filters="sRGB">
        <feColorMatrix values="0.393 0.769 0.189 0 0 0.349 0.686 0.168 0 0 0.272 0.534 0.131 0 0 0 0 0 1 0" result="sepia"></feColorMatrix>
        <feComposite in="sepia" in2="SourceGraphic" operator="arithmetic" k2="0.5" k3="0.5" />
       </filter>
</defs>
<image xlink:href="https://lh3.googleusercontent.com/-3aQKtylD9l4/UTsnK80IA1I/AAAAAAAAcbs/h8m5qkrHYBU/s512/_DSC7605.jpg" filter="url(#image1362918248406filter)" width="341"  height="512"></image>
</svg>
    
<h2>Canvas Sepia Filter strength 50%</h2>
<canvas id="canvasView"></canvas>

JavaScript

var $canvas = $( "#canvasView" );
$canvas.attr( "width", 341 );
$canvas.attr( "height", 512 );    

var context = $canvas[0].getContext( "2d" ); 
var imageExample = new Image();
var filter =
{
    name : "Sepia"   
    ,   strength : 0.5
    ,   matrix : 
    [
        0.393, 0.769, 0.189, 0, 0,
        0.349, 0.686, 0.168, 0, 0,
        0.272, 0.534, 0.131, 0, 0,
        0,     0,     0,     1, 0
    ]
};

imageExample.onload = function()
{    
    context.drawImage( imageExample, 0, 0, 341, 512 );
    context.putImageData( applyFilter( context ), 0, 0 );
};
imageExample.crossOrigin = '';
imageExample.src = "https://lh3.googleusercontent.com/-3aQKtylD9l4/UTsnK80IA1I/AAAAAAAAcbs/h8m5qkrHYBU/s512/_DSC7605.jpg";

function applyFilter( context ) 
    {
        var canvasData = context.getImageData( 0, 0, 341, 512 )
        ,   len        = 341 * 512 * 4
        ;
        
        processFilter(canvasData.data, filter, len);

        return canvasData;
     }

    function colorDistance( scale, dest, src ) 
    {
        return (scale * dest + (1 - scale) * src);
    };

    function processFilter( binaryData, filter, len ) 
    {
        var r, g, b
        ,   m         = filter.matrix
        ,   s         = filter.strength
        ,   m4        = m[4]  * 255
        ,   m9        = m[9]  * 255
        ,   m14       = m[14] * 255
        ,   m19       = m[19] * 255
        ;

        for (var i = 0; i < len; i += 4) 
        {
            r = binaryData[i];
            g = binaryData[i + 1];
            b = binaryData[i + 2];

            binaryData[i    ] = colorDistance(s, (r * m[0] ) + (g * m[1] ) + (b * m[2]), r) + m4;
            binaryData[i + 1] = colorDistance(s, (r * m[5] ) + (g * m[6] ) + (b * m[7]), g) + m9;
            binaryData[i + 2] = colorDistance(s, (r * m[10]) + (g * m[11]) + (b * m[12]), b) + m14;
        }
    };