Skip to content

Generating the iOS 5 Linen texture with Canvas

I guess the linen texture which is way too prevalent in Lion and iOS 5 looked pretty cool so I tried replicating the effect in canvas. It’s not instant but the texture is generated fairly quickly. It’s all done in around 20 lines of code. The basic idea is to first create a bunch of semi-transparent noise such as the stuff on the right (Though in the real one the opacity is only 3% and in the one on the right it’s been increased to 70%). To do that, we createImageData and set every fourth pixel to 6 if Math.random() < 0.1. That means approximately 10% of the canvas will be semi-transparent with the rest being totally transparent. I’m not clever enough to embed some steganographic message in the ostensible noise pattern, because I’m just way too lazy for that sort of stuff. But if you think that that last sentence was actually a decoy for my master plan, feel free to waste time decoding a message which probably isn’t there.

After that, the canvas is converted to a DataURL so it can be loaded as an image. After loading the image, we iterate 40 times and call drawImage on the original canvas with an offset to make every single point into a cross-shape. Demo.

Posted in Design.

Tagged with , , , , , , , , , , , , , .

3 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. Cameron says

    Thats pretty cool ^^ Can I hire you to make me some real simple browser extensions? Go on msn niggarrr.

  2. Eric says

    Finally you’re using a normal browser! congratulations!
    And for me on Firefox 7.0 it creates a fullscren version(1280×800) in a blink.

Continuing the Discussion

  1. Share A Chuckle » Share A Chuckle Blog linked to this post on November 3, 2011

    [...] HTML 5 Canvas effect – I used this to create the linen effect, thanks to [...]

Some HTML is OK

or, reply to this post via trackback.