Repeat CanvasTexture

Questions
1

I have a simple 20x20 plane and a 5x5 canvas with a single horizontal line at the top.
My question is how to properly repeat the canvas texture, which in this case will repeat 20 / 5 = 4 times in both x and y directions.
I can use texture.repeat.set(4, 4) but I dont know the size of the shape beforehand, and the shape can be any 2d polygon.

https://jsfiddle.net/devAhsan/h1yfjvdc/6/

Current output (texture not repeating)

Screen Shot 2021-02-23 at 8.48.52 PM

Desired output

Screen Shot 2021-02-23 at 8.47.21 PM

2

You want a texture to repeat on you model. To do so, follow this pattern:

var loader = new THREE.TextureLoader();

var texture = loader.load( 'myTexture.jpg', function ( texture ) {

    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    texture.offset.set( 0, 0 );
    texture.repeat.set( 2, 2 );

} );

var material = new THREE.MeshPhongMaterial( {

   color: 0xffffff,
   specular:0x111111,
   shininess: 10,
   map: texture,
   . . .

} );