<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1600018073360/uqh3T0Ts_.jpeg" id="eeveelutions" />
<canvas id="canvas" width="200" height="200">

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
canvas {
  border: 1px solid #000;
}

const img = document.getElementById("eeveelutions");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

img.onload = function () {
  img.crossOrigin = "anonymous";
  ctx.drawImage(img, 0, 0);
  const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  for (i = 0; i < imgData.data.length; i += 4) {
    imgData.data[i] = 255 - imgData.data[i];
    imgData.data[i + 1] = 255 - imgData.data[i + 1];
    imgData.data[i + 2] = 255 - imgData.data[i + 2];
    imgData.data[i + 3] = 255;
  }
  ctx.putImageData(imgData, 0, 0);
};