Нарисуйте узор на прямоугольник в Javascript

Question

Как видно из заголовка, я пытаюсь нарисовать шаблон в прямоугольнике.Я создал функцию конструктора прямоугольника, чтобы нарисовать несколько прямоугольников, а затем сохранил их в массиве, чтобы выполнить цикл и вызвать функцию createRect().

Проблема в том, что холст полностью становится черным.

var canvas = document.getElementById("slideshow");
var ctx = canvas.getContext("2d");
var img = [];
var img_height = 380;
var img_length = 475.75;









function picture(){


this.img_height = img_height;
this.img_length = img_length;
this.X = 0;


this.getX = function(num) {

    switch(num){

    case 1:
        break;
    case 2:
        this.X = this.img_length;
        break;
    case 3:
        this.X = this.img_length * 2;
        break;
    case 4: 
        this.X = this.img_length * 3;
        break;
    case 5:
        this.X = -this.img_length;
        break;  
    };




};

this.createRect = function(num){

    this.obj = document.getElementById('p' + num);
    this.pattern = ctx.createPattern(this.obj, 'no-repeat');
    ctx.fillStyle = this.pattern;

    ctx.beginPath();
    ctx.fillRect(this.X, 0, this.img_length,this.img_height);
    ctx.fill();





    }



};

Это циклы для создания и отображения каждого объекта.

//Create objects
for(let i = 0;i<=5;i++)
    {
        img[i-1] = new picture();
    }

//get x coords and display
for(let i = 0;i<5;i++)
    {
        img[i].getX(i+1);
        img[i].createRect(i+1);
    }

Answer 1

Я изобрел класс _Rect для метода createRect(), который у вас есть.Этот пример не будет работать на SO, но вы можете увидеть рабочий пример на codepen

Пожалуйста, убедитесь, что вы используете изображение из того же домена.

let ctx = canvas.getContext("2d")

class _Rect{
  constructor(o){
    this.X = o.x;
    this.y = o.y;
    this.img_length = o.w;
    this.img_height = o.h
  }

  createRect() {
  this.object = document.getElementById('p1');
  this.pattern = ctx.createPattern(this.object, 'no-repeat');
  ctx.fillStyle = this.pattern;
  ctx.beginPath();
  ctx.fillRect(this.X, 0, this.img_length, this.img_height);
  ctx.strokeRect(this.X, 0, this.img_length, this.img_height);
};
}

canvas{border:1px solid}

<canvas id="canvas" width="300" height="300"></canvas>
<img id="p1" src="pin.png" />