Canvas advanced text

Replace Element with canvas background-image

by DirkWeber

HTML

<h2 id="headline">Headline</h2>

CSS

body {
    background: black;
}

h2 {
    font-size: 50px;
    padding: 40px;
    margin: 16px auto 32px;
    width:  500px;
    font-family: 'Ultra', sans-serif;
    color: #FF6600;
    line-height: 1;
   }

JavaScript

WebFontConfig = {
        google: { families: ['Ultra']},
          active: function() {setTimeout(function(){
                              fillcanvas();
                              }, 20);        
                          }
      };
      
(function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
})();

var canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    elem = document.getElementById("headline"),
    w = elem.offsetWidth,
    h = elem.offsetHeight,
    text = elem.textContent,
    style = document.defaultView.getComputedStyle(elem, null),
    font = style.getPropertyValue("font-family").match(/^[^,]*/gi).toString().replace(/['"]*/g, ""),
    size = parseFloat(style.getPropertyValue("font-size")),
    lineheight    = style.getPropertyValue("line-height"),
   topPadding = parseFloat(style.getPropertyValue("padding-top")),
    leftPadding = parseFloat(style.getPropertyValue("padding-left")),
    baseline = measureBseline(),
    gradient_1 = ctx.createLinearGradient(0, 60, 0, 90),
    gradient_2 = ctx.createLinearGradient(0, 60, 0, 90);
;

gradient_1.addColorStop(0, '#FF6600');
gradient_1.addColorStop(1, '#FF0000');

gradient_2.addColorStop(0, 'white');
gradient_2.addColorStop(1, '#FFCC00');

canvas.width = w;
canvas.height = h;

ctx.textBaseline = 'alphabetic';
ctx.scale(1,1);
 
ctx.shadowColor = "#FFFF66";
ctx.shadowOffsetX = 0; 
ctx.shadowOffsetY = 0; 
ctx.shadowBlur = 17;

function measureBseline(){
    var height,
        tag    = document.getElementsByTagName('html')[0],
        d     = document.createElement('span'),
        img = document.createElement("img");
                      
    img.width = 1;
   ...