Canvas cutout text

Masking proof of concept

by jaap

HTML

<div id="header">
     <h1>This text should be the title</h1>

    <canvas id="title" width="600" height="81"></canvas>
</div>

SCSS

#header{
    width: 600px;
    height: 400px;
    padding: 25px
    h1{
        margin-top: 50px;
        font-weight: bold;
        font-size: 36px;
        font-family: 'Helvetica';
        color:red;
        background-color: white;
        padding: 20px;
        float:left;
        margin-bottom: 20px;
    }
    background-image: url('http://wallpaperpassion.com/upload/18987/dubai-in-the-fog-wallpaper.jpg');
    background-size:cover;
    #title{

    }
}

JavaScript

$(document).ready(function () {
    var title = $('h1');
    var width = title.outerWidth();
    var height = title.outerHeight();
    var text = $('h1').html();

    createCanvasTitle(title.html(), width, height);

});

function createCanvasTitle(text, width, height) {
    var padding = 20;
    // Get a handle to our canvas
    var ctx = document.getElementById('title').getContext("2d");

    // Set size
    ctx.width = width;
    ctx.height = height;

    // Choose font
    ctx.font = "Bold 36px 'Helvetica'";

    // Draw black rectangle
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, width, height);

    // Punch out the text!
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillText(text, padding, 36 + padding);
}