JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="J_Canvas" width="400" height="100"></canvas>

CSS

canvas {
  border: 10px solid #000;
}

JavaScript

let ctx = document.getElementById('J_Canvas').getContext('2d')
let img = new Image()
let sepiaFilter = function(imgData) {
  let d = imgData.data
  for (let i = 0; i < d.length; i += 4) {
    let r = d[i]
    let g = d[i + 1]
    let b = d[i + 2]
    d[i] = (r * 0.393) + (g * 0.769) + (b * 0.189) // red
    d[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168) // green
    d[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131) // blue
  }
  return imgData
}

img.src = '/img/[email protected]'
img.onload = () => {
  ctx.drawImage(img, 0, 0)
  let imgData = ctx.getImageData(0, 0, img.width, img.height)
  ctx.putImageData(sepiaFilter(imgData), 100, 0)
}