How To Change Image Hue With HTML5 Canvas In JavaScript

Using plain Vanilla JS for in-browser image editing.

Not a Medium member? Read the full article here instead!

The web browser is a universal platform independent application for a wide array of JavaScript tools. Using HTML5 canvas and client-side JavaScript, changing colours of an image can be done easily.

Illustration by Author | Using HTML5 Canvas + JavaScript to change image RGB colour display

Classical Examples —(1) Colour Inversion & (2) Grayscale Images

Both implementations are based on the RGB colour model used to render browser images.

(1) Colour Inversion

Illustration by Author | Left: Original Image | Right: Colour Inversion Image

/* HTML5 canvas element has attribute `id` = 'canvasDemo' */
const _canvas = document.getElementById('canvasDemo');
let w = _canvas.width;
let h = _canvas.height;

const imgData = _canvas.getContext('2d').getImageData(0, 0, w, h);

// Code logic: Apply required values for RGB components
for (let i = 0; i < imgData.data.length; i += 4) {
  /* START */
  let red = imgData.data[i];
  let green = imgData.data[i + 1];
  let blue = imgData.data[i + 2];
  let alpha = 255;
  
  imgData.data[i] = 255 - red…