把圖片當材質填滿作為範圍的文字效果
或也可以說是 圖片和文字 做像下圖裁切的效果

可以利用 globalCompositeOperation
這類似 illustrations 的路徑管理員

而 canvas 能做到的裁切樣式又更多一些
目前看到最多有26種

參考資料:
MDN 合成效果
Canvas学习：图像合成

要做第一張圖的效果需要用到 "destination-in"
這會把兩個圖像交集的部分留下其他透明化
就像下圖重疊的部分會留下

留下的填滿顏色會是第一張圖的顏色
流程是先建立從外部載入圖 → 裁切工具 → 圖形

var cvs = document.getElementById("canvas"),
    ctx = cvs.getContext("2d"),
    img = new Image(),
    text = "TextText";

img.src='img.jpg';
img.onload=function(){
    ctx.drawImage(img,0,0);
    ctx.globalCompositeOperation="destination-in";
    ctx.font = '700 120px Montserrat'; 
    ctx.strokeStyle = 'red';  // 在裁切前確定文字位置用，裁切後就沒作用了可以刪除
    ctx.lineWidth = 10;
    ctx.strokeText(text, 0, 120); 
    ctx.stroke();
}