This example fills text with a specified image.

Important! The specified image must be fully loaded before calling this function or the drawing will fail. Use image.onload to be sure the image is fully loaded.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/abd19477-19b7-4b96-b5c0-294fba3f4d6b/Untitled.png

function drawImageInsideText(canvas,x,y,img,text,font){
    var c=canvas.cloneNode();
    var ctx=c.getContext('2d');
    ctx.font=font;
    ctx.fillText(text,x,y);
    ctx.globalCompositeOperation='source-atop';
    ctx.drawImage(img,0,0);
    canvas.getContext('2d').drawImage(c,0,0);
}