Fixed Canvas Backgrounds

I’ve talked a bit about separating our semantic and non-semantic content within websites. We can take our rich non-semantic content and throw it onto a canvas. This provides a number of benefits, cleaning up our markup, reducing DOM elements and optimizes performance. I’ve put together some examples of how this can be used in both Fixed Canvas Backgrounds

Tiny Javascript Libraries

I used to do a lot of flash banner ads. Banner ads have tight requirements around file size so as not to bloat the hosting page’s download. With banner ads migrating to HTML this is even more of an issue with often lack of compression. Jack Doyle of Greensock wrote a great article talking about Tiny Javascript Libraries

Masking in GLSL

WebGL is complicated. Libraries like Three.js have made it more approachable but to do advanced effects you still need to understand the inner workings of WebGL, this includes GLSL shaders. Shaders are small programs that run on the GPU and they consist of two types, vertex shaders which draw the geometry and fragment shaders which Masking in GLSL

Masking in Canvas

Because the canvas requires manual drawing through scripting we need to leverage the 2d canvas API, through the canvas’ 2d context. Clip paths in canvas are pretty straight forward. First we simply draw a path using the beginPath method on our context, followed by the drawing commands, then closePath. ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / Masking in Canvas