Text Knockout With Canvas

Recently, I’ve been working on a complete visual overhaul of my own website and blog. Instead of the huge, bold lines of my previous site (resembling my old resume), I decided to start fresh with a much smaller, simpler, and subtler design. After fooling around in Photoshop for a while, I came up with the header:

Look above.

Rather than being decisive and choosing on a single colour to define the site, I decided to let the colour of the background dictate the main colour of the site at any given time. As my old design featured hundreds of random thumbnails on its homepage, I opted to use those exact same thumbnails – just blown up, blurred, and very colourful, as the randomly-chosen backdrop for each page.

To accomplish the text knockout effect in the site’s header, I simply used a transparent PNG, as it’s lighter to bake in the font to a PNG than embed Proxima Nova. However, I also wanted to knock out each h1 and h2 in the body of each blog post. To do so, I turned to HTML5 canvas.

Titles that look like this, punching out to the background!

Canvas has a number of different compositing modes that allow Photoshop-style blending tricks, although somewhat less complex.

To reproduce Photoshop’s knockout effect, I simply turned to the destination-out compositing mode:

ctx.globalCompositeOperation = 'destination-out'

However, it wasn’t quite that simple. To allow smooth fallback for older browsers (or even browsers like Safari that don’t fully support compositing modes) I wanted to dynamically swap each tag with a canvas tag after each page load. To replicate the style of each tag, I turned to a very useful function I hadn’t used before: getComputedStyle. To get every single style on any tag, I had to simply run:

style = document.defaultView.getComputedStyle(this.element, "")
//  style.paddingTop, style.paddingBottom, etc...

Thus, on document.ready, all I had to do was:

Find the computed styles of each tag to be replaced
Create a new <canvas> element with the same outer width and height
Apply the original styles to a new <canvas> element
Move the padding of the element to inside its ‘width’ (breaking the box model)
Set the compositing mode to destination-out
Draw the text on the canvas
Swap the original element for the new canvas

Et voilà, it works and looks awesome. (…in some browsers.)

As always, code is on Github:

// Some really hacky code being used in my next blog redesign. // by Peter Sobot (psobot.com) on December 16, 2012 ;(function ( $, window, document, undefined ) { var pluginName = 'punchout', defaults = { }; function Plugin( element, options ) { this.element = element; this.options = $.extend( {}, defaults, options) ; this._defaults = defaults; this._name = pluginName; this.init(); } Plugin.prototype.init = function () { e = $(this.element); i = $('.punchout').length; style = document.defaultView.getComputedStyle(this.element, ""); width = parseInt(e.width()); height = parseInt(e.height()); p_top = parseInt(style.paddingTop || 0); p_bottom = parseInt(style.paddingBottom || 0); p_left = parseInt(style.paddingLeft || 0); p_right = parseInt(style.paddingRight || 0); width += p_left + p_right; height += p_top + p_bottom; id = "punchout_" + i; e.after("<canvas width='" + width + "px' height='" + height + "px' class='punchout' id='" + id + "'></canvas>"); canvas = document.getElementById(id); ctx = canvas.getContext('2d'); canvas.style.cssText = style.cssText; canvas.style.backgroundColor = 'transparent'; canvas.style.padding = 0; canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; alpha = parseFloat(e.css('background').split(' ').slice(3, 4)); ctx.globalAlpha = 1.0; colour = e.css('background').split(' ').slice(0, 4).join(' '); ctx.fillStyle = colour; ctx.fillRect(0, 0, width, height); ctx.font = e.css('font'); ctx.fillStyle = '#000000'; ctx.textBaseline = 'top'; ctx.globalCompositeOperation = 'destination-out'; text = e.html(); function overflow(text) { return ctx.measureText(text, p_left, p_top).width > (width - p_left - p_right); } if (overflow(text)) { // TODO: This effectively re-implements text wrapping. // It does not take into account the correct text metrics. // It is a giant hack. Fix it. lines = []; while (text.length > 0) { var i; words = text.split(' '); for (i = words.length; overflow(text); i--) { text = words.slice(0, i).join(' '); } lines.push(text); text = words.slice(i + 1, words.length).join(' '); } for (l in lines) { ctx.fillText(lines[l], p_left, l == 0 ? p_top : ((l / lines.length) * height)); } } else { ctx.fillText(text, p_left, p_top); } e.remove(); }; $.fn[pluginName] = function ( options ) { return this.each(function () { if (!$.data(this, 'plugin_' + pluginName)) { $.data(this, 'plugin_' + pluginName, new Plugin( this, options )); } }); } })( jQuery, window, document ); jQuery(window).ready(function(){ isMobileAndWorksAndLooksGood = function() { return navigator.userAgent.toLowerCase().indexOf('mobile') > -1 && navigator.userAgent.toLowerCase().indexOf('safari') > -1 && window.devicePixelRatio == 1 } if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1 || isMobileAndWorksAndLooksGood()) { setTimeout(function(){$('h1.title, h2, h3, h4').punchout();}, 500); } });