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…
Tag: masking
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…
Masking in SVG
Masking is really powerful in SVG in fact SVG has it’s own mask element specific to this purpose. <mask id=”myMask”></mask> We can add this element into our <defs> tag and then any content we add…
Masking in CSS
As far as CSS features go this is still relatively new. Because of this, support can be spotty. So let’s check out caniuse.com. Caniuse is a website created by a friend of mine Alexis Diveria,…
Masking in Design Tools
Before digital imaging similar effects to masking could be achieved through double exposure, where film is exposed to multiple negatives or shapes which combine the visible portion of the photographs. In digital media this uses…