In my last post I presented a method for drawing imperfect circles in an HTML5 canvas. The imperfection was coded using a fractal subdivision process to create a noise function. Here I tweak the subdivision algorithm a little, and apply the same basic idea to drawing rectangles. Click on the two screenshots below to see two examples of imperfect rectangles which (to me, anyway) appear to be drawn by a human with paints or markers:

[Update 2021: I’m afraid I had to remove my code as it seems people may be profiting from NFTs built with my ideas and code, without attribution.

I’m afraid I have also felt the need to remove the precise ideas behind the code.]

Stripes:


html5 canvas imperfect rectangles

Blocks of color:

html5 canvas imperfect rectangles