Grayscale and Inversion Filters for Images

imagefilter.js

const grayscale = pixel => {
  const [r, g, b] = pixel.data
  const average = (r + g + b) / 3

  pixel.data[0] = average
  pixel.data[1] = average
  pixel.data[2] = average

  return pixel
}

const invert = pixel => {
  const [r, g, b] = pixel.data

  pixel.data[0] = 255 - r
  pixel.data[1] = 255 - g
  pixel.data[2] = 255 - b

  return pixel
}
  

const applyFilter = (filter, context, image, timeoffset = 10) => {
  for(let x = 0; x < image.width; x++) {
    for(let y = 0; y < image.height; y++) {
      window.setTimeout(() => {
        const pixel = context.getImageData(x, y, 1, 1)
        context.putImageData(filter(pixel), x, y)
      }, x * timeoffset)
    }
  }
}