Anton's Research Ramblings

Making HTML5 Canvas 2d Work Very Hard Indeed

Using a barycentric algorithm to rasterise and fill a triangle into pixels, based on 3 input vertices.

This morning I had a go at writing my own triangle rasteriser (pictured above), in C, using Möbius' barycentric co-ordinates. Apparently using a variation of Bresenham's line-drawing has a faster fill-rate, but I wanted to try something new. "Why not make a live on-line one?" I thought - hence, the Canvas 2d version below. I have the power!

'Canvas 2d? Crom laughs at your 2d. Laughs from his mountain.'

I wrote a 3d renderer. You will see in the live demo that I didn't add depth-testing - that could be easily done! I don't know what algorithm the canvas 2d "fill" uses. For the live version click here - I couldn't embed it in this blog feed because security, main thread, etc, etc.