Image text

by hardiksondagar

HTML

<canvas id="demo" width=500 heigth=300></canvas>

JavaScript

/// setup context and text
var ctx = demo.getContext('2d'),
   // texts = ['THIS', 'IS', 'HAWAII'],
    texts='This is Hawaili';
    img = new Image,
    i = 0;

/// prep text properties
ctx.textBaseline = 'top';
ctx.font = '150px impact';
ctx.textAlign = 'center';

/// load image and when ready, go
img.onload = sparta;
img.src = 'http://i.imgur.com/TzKl9Kml.jpg';

/// main loop
function sparta() {

    /// get current text
    var txt = texts;
    
    /// loop when at end of array
    if (i === texts.length) i = 0;
    
    /// clear canvas
    ctx.clearRect(0, 0, demo.width, demo.height);
    
    /// draw text
    ctx.fillText(txt, demo.width * 0.5, 10);
    
    /// change composite mode to fill text
    ctx.globalCompositeOperation = 'source-in';
    
    /// draw image on top, will be clipped by text
    ctx.drawImage(img, 0, 0);

    /// reset composite mode to normal
    ctx.globalCompositeOperation = 'source-over';

    /// create a shadow by setting shadow...
    ctx.save();
    ctx.shadowColor = 'rgba(0,0,0,0.5)';
    ctx.shadowBlur = 7;
    ctx.shadowOffsetX = 3;
    ctx.shadowOffsetY = 3;
    
    /// ... and drawing it self back
    ctx.drawImage(demo, 0, 0);
    ctx.restore();

    /// loop
   // setTimeout(sparta, 1000);
}