0

I am trying to make a specific color in a HTML5 2d canvas transparent For performance reasons I don't want to iterate over all pixels I have been looking at the webgl-2d.js library to create a webgl canvas to draw it to that to start with to ultimate use clearColor to set the color I want to make transparent and then coy the image back to my 2d canvas. But isn't there a better approach for doing this in the 2d canvas directly.

Cheers Franz

Franz Thomsen
  • 484
  • 1
  • 6
  • 17
  • It depends, if you talk about a specific color chromakey, then svg filters can help: https://stackoverflow.com/questions/41639049/replace-one-color-using-svg-filters (you can now apply such filter directly to the canvas with `ctx.filter = '#id_of_filter'`). If you need to have a range of colors (i.e a threshold) then iterating is still the best in terms of perfs for the 2D API. If you don't want high precision, you can also [mix iteration on a smaller canvas and gCO](https://stackoverflow.com/questions/33687775//33727707#33727707). – Kaiido Jan 23 '18 at 00:47
  • Ps: [here](https://jsfiddle.net/4x3rL9yx/) I started to make some helper functions based on the linked answer that you might want to tweak. But keep in mind this will match only exact color values (i.e almost useless for video processing). It might be possible to get better results using other types of [componentTransfers](https://developer.mozilla.org/ja/docs/Web/SVG/Element/feComponentTransfer), but I didn't had time yet to learn it... – Kaiido Jan 23 '18 at 01:40
  • Yes, I am talking about one specific color that I would like to make transparent – Franz Thomsen Jan 23 '18 at 03:57
  • Then you can use the code in the fiddle. – Kaiido Jan 23 '18 at 03:58
  • Awesome stuff, got it to work. Leave an answer please :-) – Franz Thomsen Jan 24 '18 at 02:17

0 Answers0