Create polygon patterns with images using javascript

I am using tactileJS to create an image pattern. I want to create an asymmetry pattern with the repeated images using HTML and javascript.

The image can be repeated in triangle/start or any other polygon shape. As shown in the below image.

I tried this but tactile js is giving pattern but not able to fill image in each pattern shape. below are the results from tactile js

this is what i have tried.

<img style="visibility: hidden;" src="pizza.png" id="img">
        <canvas id="canvas" width="500" height="500">
        </canvas>


import { mul, EdgeShape, tilingTypes, IsohedralTiling } 
    from '../lib/tactile.js';

function drawRandomTiling()
{
    var canvas = document.getElementById( 'canvas' );
    var ctx = canvas.getContext( '2d' );

    const { tiling, edges } = makeRandomTiling();

    // Make some random colours.
    let cols = [];
    for( let i = 0; i < 3; ++i ) {
        cols.push( 'rgb(' +
            Math.floor( Math.random() * 255.0 ) + ',' +
            Math.floor( Math.random() * 255.0 ) + ',' +
            Math.floor( Math.random() * 255.0 ) + ')' );
    }

    ctx.lineWidth = 1.0;
    ctx.strokeStyle = '#000';
    var imgElement = document.getElementById('img');
    var pattern = ctx.createPattern(imgElement, "repeat");

    // Define a world-to-screen transformation matrix that scales by 50x.
    const ST = [ 50.0, 0.0, 0.0, 
                 0.0, 50.0, 0.0 ];

    for( let i of tiling.fillRegionBounds( -2, -2, 12, 12 ) ) {
        const T = mul( ST, i.T );
        //ctx.fillStyle = cols[ tiling.getColour( i.t1, i.t2, i.aspect ) ];
        ctx.fillStyle = pattern;

        let start = true;
        ctx.beginPath();

        for( let si of tiling.shape() ) {
            const S = mul( T, si.T );
            let seg = [ mul( S, { x: 0.0, y: 0.0 } ) ];

            if( si.shape != EdgeShape.I ) {
                const ej = edges[ si.id ];
                seg.push( mul( S, ej[0] ) );
                seg.push( mul( S, ej[1] ) );
            }

            seg.push( mul( S, { x: 1.0, y: 0.0 } ) );

            if( si.rev ) {
                seg = seg.reverse();
            }

            if( start ) {
                start = false;
                ctx.moveTo( seg[0].x, seg[0].y );
            }

            if( seg.length == 2 ) {
                ctx.lineTo( seg[1].x, seg[1].y );
            } else {
                ctx.bezierCurveTo( 
                    seg[1].x, seg[1].y, 
                    seg[2].x, seg[2].y, 
                    seg[3].x, seg[3].y );
            }
        }   

        ctx.closePath();
        ctx.fill();
        //ctx.drawImage(imgElement, 10, 10, 60, 60);
        ctx.stroke();
    }
}