html5 canvasベースの宿題添削用スモールプラグイン

let self = this;
    this.canvasNode = document.createElement('canvas');
    let styleString = this.utils.formatStyle(CANVAS_STYLE); // CANVAS_STYLE is the style of the canvas
    this.canvasNode.setAttribute('id','canvas');
    // Make sure to set the width and height
    let ratio = this.imgNode.width / this.imgNode.height, height = this.imgNode.height, width = this.imgNode.width;
    let tempWidth , tempHeight;
    // scale to scale
    if(ratio >= window.innerWidth / window.innerHeight){
      if(width > window.innerWidth){
        tempWidth = window.innerWidth;
        tempHeight = height * window.innerWidth / width;
      } else {
        tempWidth = width;
        tempHeight = height;
      }
    }else {
      if(height > window.innerHeight){
        tempWidth = width * window.innerHeight / width;
        tempHeight = window.innerHeight;
      }else{
        tempWidth = width;
        tempHeight = height;
      }
    }
    this.canvasNode.height = tempHeight;
    this.canvasNode.width = tempWidth;
    styleString = Object.assign({'width': tempWidth, 'height': tempHeight}, CANVAS_STYLE);
    this.canvasNode.setAttribute('style', styleString);

    let ctx = this.canvasNode.getContext('2d'), startX = 0, startY = 0;
    let image = new Image() ;
    image.setAttribute("crossOrigin",'Anonymous')
    // add a timestamp because the domain name of this image is not set cross domain https://www.jianshu.com/p/c3aa975923de
    image.src = this.imgNode.src + '?t=' + new Date().getTime(); 
    image.height = tempHeight;
    image.width = tempWidth;
    image.onload = function(){
      ctx.drawImage(image, 0, 0, tempWidth, tempHeight);
    }
    // Mouseover event
    let mousemoveFn = function(e) {
      ctx.beginPath();
      ctx.lineWidth = 3;
      ctx.strokeStyle = self.currentColor;
      if(startX == e.clientX - self.canvasNode.offsetLeft || startY === e.clientY - self.canvasNode.offsetTop ) return
      ctx.moveTo(startX,startY);
      ctx.lineTo(e.clientX - self.canvasNode.offsetLeft , e.clientY - self.canvasNode.offsetTop );
      ctx.stroke();
      startX = e.clientX - self.canvasNode.offsetLeft;
      startY = e.clientY - self.canvasNode.offsetTop ; // 37 is the height of the header
    }
    // mouse press event
    this.canvasNode.addEventListener("mousedown",function(e){
      startX = e.clientX - self.canvasNode.offsetLeft;
      startY = e.clientY - self.canvasNode.offsetTop ;

      // If you record in mouseup, you have to do one more step when you withdraw
      let imageData = ctx.getImageData(0,0, self.canvasNode.width, self.canvasNode.height);
      self.imageDataArray.push(imageData); // This imageDataArray is used to record the strokes of the brush
      self.canvasNode.addEventListener("mousemove", mousemoveFn, false);
    },false);
    this.canvasNode.addEventListener('mouseup', function(e){
      self.canvasNode.removeEventListener('mousemove', mousemoveFn);
    });
    this.bgNode.appendChild(this.canvasNode);