사용자 정의 canvas 다루기

 public create () {
    const canvas = document.createElement('canvas');
    this.ctx = canvas.getContext('2d');
    this.textures.addCanvas('canvas', canvas);
 }

snapshot을 찍은 후 사용자 정의 canvas를 이용하여 특정 color를 추출하는 예제
동일 기능인데 하나는 바로 처리, 다른 하나는 이미지로 변경하여 처리

private checkBinggo() {
    this.renderer.snapshot((image: any) => {
      this.ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, 200, 200);
      const data = this.ctx.getImageData(0, 0, 200, 200).data;
      const placer = _.filter(data, (d: any)=>{
        return d === 128;
      })

      const remainPixels = placer.length / this.placerPixels;
      if(remainPixels < 1.5) {
        this.gameCallback({message: 'bingo'});
        console.log('binggo');
      }
    
    });
  }

 private checkBinggo() {
    this.renderer.snapshot((image: any) => {
      const img = new Image();
      img.src = image.src;
      img.onload = () => {
        this.ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 200, 200);

        const data = this.ctx.getImageData(0, 0, 200, 200).data;
        const placer = _.filter(data, (d: any)=>{
          return d === 128;
        })

        const remainPixels = placer.length / this.placerPixels;

        if(remainPixels < 1) {
          this.gameCallback({message: 'bingo'});
          console.log('binggo');
        }
      };
    });
  }