Fill text with an image

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.

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);
}

Found a mistake? Have a question or improvement idea? Let me know.

Table Of Contents