User help - smearing title

HTML

<canvas id="canvas" width="500" height="500"></canvas>

CSS

#canvas {
    position:fixed;
    left:0;
    top:0;
}
body {height:1200px}

JavaScript

var ctx = canvas.getContext('2d'),
    y = 0,
    ty = 50,
    txt = 'My smearing title';

ctx.fillStyle = '#007';
ctx.font = '40px arial black';
ctx.textBaseline = 'top';

drawTitle();

$(window).on('scroll', function(e) {
    y = $(this).scrollTop();
    
    drawTitle();

});

function drawTitle() {
    ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#007';
    ctx.fillText(txt, 20, -y + ty);
}