Применение паттернов в canvas

const canvasPatterns = document.getElementById('fon'); 
    let ctx = canvasPatterns.getContext('2d'); 
 
    const img = new Image(); 
    img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/L_Old_London.svg/220px-L_Old_London.svg.png'; 
    img.onload = function () { 
     
        ctx.fillStyle = ctx.createPattern(img, 'repeat'); 
        ctx.fillRect(25, 25, ctx.canvas.width - 50, ctx.canvas.height - 50); 
         
        const patternLine = document.getElementById('block'); 
        let patternCtx = patternLine.getContext('2d'); 
        patternCtx.fillStyle = 'grey'; 
        patternCtx.fillRect(0, 0, 25, 25); 
        patternLine.style.display = 'none'; 
 
        ctx.strokeStyle = ctx.createPattern(patternLine, 'repeat'); 
        ctx.lineWidth = 50; 
        ctx.strokeRect(0, 0, canvasPatterns.width, canvasPatterns.height); 
 
        ctx.fillStyle = ctx.createPattern(patternLine, 'repeat'); 
        ctx.lineWidth = 50; 
        ctx.strokeRect(25, 25, 100, 25); 
    };

<canvas id="fon" width="600" height="300"></canvas> 
<canvas id="block" width="25" height="25"></canvas>