How Change Hue of Javascript/Html Canvas Image

Question

I have a spritesheet image made up of 16*16 tiles. I already have a good loading system and I have handled drawing them without losing the aspect ratio. The problem is that I want to get a 16 * 16 tile of that sheet, copy it, and change the hue of the new image by some amount.

I think I have copying working, but here is all my code

let temp = document.createElement('canvas').getContext('2d');

temp.drawImage('spritesheet.png',0,0)

let pixels = temp.getImageData(0, 0, 16,16);

//manipulate them so that the hue is changed (can't find code for)

let Shifted = new Image();
Shifted.src = temp.canvas.toDataUrl("image/png");

flowb · Accepted Answer · 2020-05-31 01:13:59Z

1

This QA can be useful (explaining how to change the image colors). Otherwise a canvas filter can be applied to the image, this article demonstrate it in details.

Example from the linked howto:

var gradientColors = createGradient('#0096ff', '#ff00f0');
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
applyGradient(imageData.data);

for (var i = 0; i < data.length; i += 4) {
  // Get the each channel color value
  var redValue = data[i];
  var greenValue = data[i+1];
  var blueValue = data[i+2];

  // Mapping the color values to the gradient index
  // Replacing the grayscale color value with a color for the duotone gradient
  data[i] = gradientColors[redValue].r;
  data[i+1] = gradientColors[greenValue].g;
  data[i+2] = gradientColors[blueValue].b;
  data[i+3] = 255;
}

answered May 31, 2020 at 1:13

flowb

3010 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How Change Hue of Javascript/Html Canvas Image

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related