CODEWITHSUNDEEP
htmlcanvas
Vash
Vash

Reputation: 704

Any way to fill an image surface with a color? (Canvas)

I've searching a way to fill an image surface with a color with canvas but didn't find what i'm looking for.

Is there actually any way to do it?

There is an example of what i'm talking about:

If the image is like this:

enter image description here

I would need to paint this with canvas:

enter image description here

Just fill the actual image surface with a color (black in this case).

I think this Android method does the same, so I hope there is something similar on canvas.

imageView.setColorFilter(Color.RED);

Thank you in advance.

Upvotes: 0

Views: 86

Answers (1)

user1693593
user1693593

Reputation:

You can use composition mode to do this, more specifically the source-in:

ctx.globalCompositeOperation = "source-in";
ctx.fillRect(x, y, w, h); // fill the image area using current color


// Using the original colored logo in OPs post:
var img = new Image; img.onload = go; img.src = "//i.sstatic.net/kv435.png";
function go() {
  var ctx = c.getContext("2d");
  c.width = this.width; c.height = this.height;
  ctx.drawImage(this, 0, 0);
  
  // change color
  ctx.globalCompositeOperation = "source-in";
  ctx.fillRect(0, 0, c.width, c.height);      // def. color is black
}
<canvas id=c></canvas>

What's important to be aware of though is that composite operations works with the alpha channel. If the image doesn't have an alpha channel but just a white background, this approach won't work. In that case you would need to iterate over each pixel and replace all non-white pixels to the target color pixel.

For this approach you can use getImageData(). But my recommendation is to prepare the image so it has an alpha channel embedded before processing.

Upvotes: 1

Related Questions