I'm trying to draw a triangle without any type of anti aliasing or "smooth" edges. I want to have hard edges because the final goal is to render a hard line.
I created a canvas 10x10px and drew a small triangle. I scaled the canvas to better see how the pixels are colored.
I disabled the antialias configuration when creating the canvas.
gl = canvas.getContext('webgl2', { antialias: false })
However the triangle is still being drawn with "smooth" edges. If I activate antialias the smoothing is stronger, which makes me think that the problem lies somewhere else.
I thought maybe it's the interpolation of the colors, but since every vertex has the same color that cannot be the problem.
The other thing I'm thinking is that during rasterization the covered pixels are not fully drawn but only semi drawn if not fully covered. If that is so, how can this be changed?
I would really appreciate some help here.
When scaling elements the browser bilinearly interpolates graphics elements (canvas, images, videos), adding image-rendering: pixelated; to your canvas CSS styles will apply nearest filtering instead of linear, resembling the actual output of your rendering.