This is interesting. I don't know much about html canvas, but it looks like this is handled in the author's custom js [0] in the line that starts with: "} else if (mode === "blades") {"
Do you mean, how it was drawn using canvas?
I'm guessing they drew overlapped part of the last blade twice
Looks like so, with a clever rotation, clipping, and drawing twice (had a cursory look at 'lenses.js', look for 'draw_blade')
Not sure I get your question, you want to know how it works in real life ? Have a look here: https://www.youtube.com/watch?v=cR7cibDvYyo
I think the question is how is this drawn on a canvas. It's not trivial, if I draw 6 shapes successively, one will be on top and another at the bottom, you would not see the tip of one at the top and the other part of the same blade at the bottom. Nicely spotted, interesting question!
> In real camera lenses an adjustable aperture is often constructed from a set of overlapping blades that constitute an iris.
If you naively create 6 blades and rotate them around the pivot (the tiny screw), they will never overlap EACH OTHER. One will end up at the very top, and one at the very bottom.
If you know how this was created, please let me know.