Pattern

Pattern

 

• createPattern(image,repeat)
  - 이미지, 비디오, 다른 캔버스 요소를 참조하여 패턴으로 반복시키는 메소드
  - repeat 값은 css의 background-repeat 속성의 값과 동일하다.
  

  const canvas9 = document.getElementById('canvas9');
  const ctx9 = canvas9.getContext('2d');
  const patImg1 = document.getElementById('pat1');
  const myPat1 = ctx9.createPattern(patImg1, 'repeat');
  ctx9.fillStyle = myPat1;
  ctx9.fillRect(150,100,300,200);
  
  const canvas10 = document.getElementById('canvas10');
  const ctx10 = canvas10.getContext('2d');
  const myImg1 = new Image();
  myImg1.src = 'img/pattern2.png';
  myImg1.onload = function(){
      const myPat2 = ctx10.createPattern(myImg1, 'repeat');
      ctx10.fillStyle = myPat2;
      ctx10.fillRect(0,0,canvas10.width,canvas10.height);
  }