Develop Reference

Webgl sprite rendering, alpha blending white edges

I have a sprite with alpha channel (first image, it has texture padding, to prevent texture bleeding, thats why it's "thicker"). The second picture is what I see when I render the sprite. The strange thing is the alpha blending works, because the light blue inside the circle is alpha blue, I see it is working. And the orange parts has also alpha colors at the edges (because of anti aliasing).
But how that white edge possible around the blue circle? The blue circle has alpha, I see it is working. I can't comprehend if the alpha blending working (for the alpha blue pixels), how that white edge around the blue circle is possible (that's the alpha orange pixels)?
How can I prevent rendering the white edges around the sprite's blue circle?
gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
If I render the sprite to a HTML canvas works as expected, has alpha blending, no white edges around the circle.
The attached images has no alpha channel, but it's there in my app.

I found the solution.. It seems if I not turning off the alpha at the getContext, alpha not working properly.
const gl = canvas.getContext("webgl2", {
alpha: false,
});
Then I realized this way only works for NEAREST texture filtering, to work for LINEAR filtering and for MIPMAPs you also need:
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

Count polygons of different colors on canvas

I have several intersecting semitransparent polygons, which divides the canvas on some number of other polygons of different colors. Here is an example with 3 triangles:
How I can calculate the number of areas of the different colors created by this intersection? In the presented picture there are 2 grey areas; 3 red; 3 green; 1 blue; 1 violet (red and blue triangles intersection); 1 olive (red and green triangles intersection); 1 teal blue (green and blue triangles intersection). Is it possible to adopt for this purpose Sutherland-Hodgman clipping algorithm that allowing to find the polygon that is the intersection between two arbitrary polygons?

svg rect multiple fill colors

I have a svg rect element. I have "fill: rgb(31, 119, 180);" which renders the rect on the left side of image below.
How can I set the rect style to render the multiple borders like the one on right?

This isn't possible. Instead, you could use a second rectangle. The first one would have a white background with a black border, and the interior one would be blue. Or the first one could just be black, and the interior one would be blue with a white stroke.

Canvas Gradient

I'm trying to create a color selector shaped like a triangle. I'm looking at things like color wheel( http://jweir.github.com/colorwheel/ ) but I don't know how to modify it so that I can change the shape of the square to a triangle

the simplest method would be to have an image with all your colors pre-drawn. cope the image to a canvas and use canvasPixelArray to get the color and alpha if desired.

processing.js rect() different border colors

I'm drawing a game grid with rect() and I'd like some borders of my rectangle have different colors.
exemple: I'd like a rectangle with left and right borders green but top and bottom borders blue, do you see a way ?
Thanks

You can't color rect borders differently, but you can retrace your rect with separate lines:
stroke(0,0,255);
rect(50,50,100,100);
stroke(0,255,0);
line(50,50,50,150);
line(150,50,150,150);