change image's color ?

[Lora336]

Hi, @vasturiano.

I want change my image's color. "original color" to "red".
It's not about changing the image itself.
change the color to only one image file.

Can I do this? (this is what I try code)

case 1.
const Graph = ForceGraph()
      (document.getElementById('graph'))
      .nodeCanvasObject(({ img, x, y }, ctx) => {
        const size = 12;
        ctx.drawImage(img, x - size / 2, y - size / 2, size, size);

        ctx.image.color.set("red");      //Is there a similar function like this? (this is my imagine code)
      })


case 2.
const Graph = ForceGraph()
      (document.getElementById('graph'))
      .nodeCanvasObject(({ img, x, y }, ctx) => {
        const size = 12;

        ctx.fillStyle = "#09f";
        ctx.fillRect(0, 0, c.width, c.height);
        ctx.drawImage(img, x - size / 2, y - size / 2, size, size);

      })

😂thank you,

[vasturiano]

@Lora336 this is more of a question about Canvas itself, so a more Canvas focused forum may be a better place to ask.

In any case, Canvas is a raster based rendering, so I don't think it's easy to just re-color an image. But, perhaps you're able to get close to your intention by using some filters: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter.