是否可以在画布中的每个向量中选择图像的相同部分作为填充符？

Question

我有一个像这样绘制的三角形数组，我正在尝试创建一个类似万花筒的图案，所以我想在每个三角形中使用相同的图像部分。当我应用这样的图案时，三角形更像裁剪蒙版，而是曝光所有图像。

draw = () => {
        triangles.forEach((t) => {
            const pattern = c.createPattern(image, 'no-repeat')
            c.beginPath();
            c.moveTo(t.center.x, t.center.y)
            c.lineTo(t.right.x, t.right.y)
            c.lineTo(t.left.x, t.left.y)
            c.fillStyle = pattern
            c.fill();

        })

    }
fill()
image.src = 'http://www.allers.se/wp-content/uploads/2011/04/kungen-ny-700x525.jpg'
image.onload = function() {
  draw()
};

http://jsfiddle.net/cagpum6z/