So in the following code i only want to get that image data whose g from rgba value is 0,so how would i please?

Question

I am trying to understand how it works and since those with red pixels have rgba of 255,0,0,255 ,I only want to iterate through ones and change their color with g being 0 which obviously means it won't include white pixels around text ,but when I log out the result I get all the data ,why so?

https://code.sololearn.com/WnkfOLDxpe6v/?ref=app

Answer 1

The <canvas> element and the rendering context are not one and the same.

The background color of the canvas is white but the pixels around the text are not. The RBGA for each pixel that is not part of the text has a rgba(0,0,0,0). Hence the reason why every data element is logged out.

I change the canvas background to yellow to make the point.
https://code.sololearn.com/WlCLWYQnIWr1/#html

https://code.sololearn.com/WkLfVSON63Lh/#js

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage

Answer 2

ODLNT thank you so much!