// James Brink, 5/12/2020

let output;  //debugging
/**
 *_myMainCanvas:  The first MyCanvas created is assigned to _myMainCanvas.
 * This allows the creation of simple functions that can be used to use that
 * MyCanvas without  giving it a name in the user program.  For
 * example:
 *  createMyCanvas(100, 100);
 *  myBackground(210);
 *  myRect(20, 40, 30, 40);
 * The following two functions are intended to illustrate the possibility, not to
 * be really useful.
 */
var _myMainCanvas;

function myBackground(arg1, arg2, arg3, arg4) {
  _myMainCanvas.background(arg1, arg2, arg3, arg4);
}  // end myBackground

function myRect(x, y, width, height) {
  _myMainCanvas.rect(x, y, width, height);
}  // end myRect

/**
 * Creates a MyCanvas
 */
createMyCanvas = function(w, h) {
  if (w <= 0 || h <= 0) {
       // this is an error
    print("Invalid canvas dimensions:  createMyCanvas(" + w+", " +h +")");
  } else {
    if (canvasCounter == 0) {
      _myMainCanvas = new MyCanvas(this, w, h);
      _myMainCanvas._isMainCanvas = true;
      return _myMainCanvas;
    } else {
      return new MyCanvas(this, w, h);
    }
  }
}  // end createMyCanvas

/**
 * canvasCounter is used to for giving id's to MyCanvas and for determining
 * the first canvas created: _myMainCanvas
 */
let canvasCounter = 0;

/**
 * The MyCanvas class which contains an HTML canvas.
 */
class MyCanvas {
  /**
   * The constructor declares all the properties and methods for MyCanvas.
   */
  constructor(itsP, itsWidth, itsHeight) {
  //  this.p = itsP;
    this.width = itsWidth;
    this.height = itsHeight;

    canvasCounter ++;
  //  this._pInst=this.p;
    this._pInst = itsP;

    this._textFont = "san-serif";
    this._textStyle = "normal";
    this._textSize = 12;
    this._textLeading = 15;   /////////
    this._textAlign = LEFT;
    this._rectMode = CORNER;
    this._ellipseMode = CENTER;
    this.canvas = document.createElement('canvas');
    this.canvas.width = this.width;
    this.canvas.height = this.height;
    this.canvas.style = 'width:' +  this.width + 'px; height: ' + this.height
        + 'px; border:1px solid;';
    this.elt = this.canvas;
    document.body.appendChild(this.canvas);
    this.drawingContext = this.canvas.getContext("2d");
    this._isMainCanvas = false;

    this.isOver = false;   // mouse is over this MyCanvas when true
    this.mouseX;
    this.mouseY;
    this.pmouseX;  // not implemented correctly
    this.pmouseY;  // not implemented correctly
                   // because I don't know the new frame event
    this.mouseIsPressed = false;
    this.keyIsPressed = false;
 
    this._backgroundColor = [0, 0, 0];
    this._fillColor = [255, 255, 255];
    this._strokeColor = [0, 0, 0];
    this._strokeWeight = 1;
    this._strokeText = false;  // used to prevent stoking text initially

    // every MyCanvas initially gets an unique id of the form "myCanvasn"
    // where "n" is a counter.  This is potentially useful for
    // document.getElementById
    this._id = "myCanvas" + canvasCounter;
    this.canvas.id = this._id;

    this.id = function(id) {
      if (id != null) {
         this._id = id;
         this.canvas.id = id;
      }
      return (this.canvas).id;
    }  // end id method

    this.parent = function(parent) {
      // If parameter parent isn't null, it makes parameter
      // parent the parent of this.canvas.  In any case, it
      // returns the parent of this.canvas.
      if (parent != null) {
        if (typeof(parent) === "string") {
          if (parent[0] === "#") {
            parent = parent.substring(1);
          }
          parent = document.getElementById(parent);
        } else if (parent.elt) {
          parent = parent.elt;
        }
        parent.appendChild(this.canvas);
      }
      return this.canvas.parentNode;
    }  // end parent method

    this.child = function(child) {
      // adapted from p5.js
      // makes parameter child a child of this.canvas if 
      // parameter child is not void.
      if (child === void 0) {
        return this.canvas.childNodes;
      }
      if (typeof child == "string") {
        if (child[0] === "#") {
          child=child.substring(1);
        }
        child=document.getElementById(child);
      } else if (child.elt) {
        child = child.elt;
      }
      this.canvas.appendChild(child)
      return this;
    }  // end child method

    /*
     * The p5 color method doesn't work right if some of the arguements
     * are null.  Rather than having this.background, this.fill and
     * this.stroke each having to sort out the number of arguments to
     * pass to the p5 color method, they use this helper method.
     */
    this.color = function(r, g, b, a) {
      let c;
      if (r == null) {
        return "No color numbers specified";
      } else if (g == null) {
        c = color(r);
      } else if (b == null) {
        c = color(r, g);
      } else if (a == null) {
        c = color(r, g, b);
      } else {
        c = color(r, g, b, a);
      }
      return c;
    }  // end color method
    
    /**
     * @method html
     * @param  {String} [html] the HTML to be placed inside the element
     * @param  {boolean} [append] whether to append HTML to existing
     * @chainable
     */
    this.html = function() {
      // adapted from p5.js
      if (arguments.length === 0) {
        return this.elt.innerHTML;
      } else if (arguments[1]) {
        this.elt.insertAdjacentHTML('beforeend', arguments[0]);
        return this;
      } else {
        this.elt.innerHTML = arguments[0];
        return this;
      }
    };
    
    this.fill = function(arg1, arg2, arg3, arg4) {
      this._fillColor = this.color(arg1, arg2, arg3, arg4);
      this.drawingContext.fillStyle = this._fillColor.toString("#rrggbbaa");
    }  // end fill method

    this.noFill = function() {
      this._fillColor = null;
    }  // end noFill method

    this.drawingContext.lineCap = "round";  // set default line ending

    this.stroke = function(arg1, arg2, arg3, arg4) {
      this._strokeText = true;
      this._strokeColor = this.color(arg1, arg2, arg3, arg4);
      this.drawingContext.strokeStyle = this._strokeColor.toString("#rrggbbaa");
    }  // end stroke method

    this.noStroke = function() {
      this._strokeColor = null;
    }  // end noStroke method

    this.strokeWeight = function(weight) {
      this._textWeight = weight;
      this._textStrokeWeight = weight/2;
      this.drawingContext.lineWidth = weight;
    }  // end strokeWeight method

    this.background = function(arg1, arg2, arg3, arg4) {
      this._backgroundColor = this.color(arg1, arg2, arg3, arg4);
      this.drawingContext.fillStyle = this._backgroundColor.toString("#rrggbbaa");
      this.drawingContext.fillRect(0, 0, this.width, this.height);
      this.drawingContext.fillStyle = this._fillColor.toString("#rrggbbaa");
    }  // end background method
    
    this.style = function(prop, val) {
      // adapted from p5.js
      if (val instanceof color) {
        val = 'rgba(' +
            val.levels[0] +
            ',' + val.levels[1] +
            ',' + val.levels[2] +
            ',' + val.levels[3] / 255 +
          ')';
      }
      if (typeof val === 'undefined') {
        // input provided as single line string
        if (prop.indexOf(':') === -1) {
          var styles = window.getComputedStyle(this.elt);
          var style = styles.getPropertyValue(prop);
          return style;
        } else {
          var attrs = prop.split(';');
          for (var i = 0; i < attrs.length; i++) {
            var parts = attrs[i].split(':');
            if (parts[0] && parts[1]) {
              this.elt.style[parts[0].trim()] = parts[1].trim();
            }
          }
        }
      } else {
        // input provided as key,val pair
        this.elt.style[prop] = val;
        if (
          prop === 'width' ||
          prop === 'height' ||
          prop === 'left' ||
          prop === 'top'
        ) {
          var numVal = val.replace(/\D+/g, '');
          this[prop] = parseInt(numVal, 10);
        }
      }
      return this;
    };
    
    this.position = function() {
      // copied from p5.js changing only the above line
      if (arguments.length === 0) {
        return { x: this.elt.offsetLeft, y: this.elt.offsetTop };
      } else {
        var positionType = 'absolute';
        if (
          arguments[2] === 'static' ||
          arguments[2] === 'fixed' ||
          arguments[2] === 'relative' ||
          arguments[2] === 'sticky' ||
          arguments[2] === 'initial' ||
          arguments[2] === 'inherit'
        ) {
          positionType = arguments[2];
        }
        this.elt.style.position = positionType;
        this.elt.style.left = arguments[0] + 'px';
        this.elt.style.top = arguments[1] + 'px';
        this.x = arguments[0];
        this.y = arguments[1];
        return this;
      }
    };  // end position method
    
    this.center = function(align) {
      // copied from p5.js changing only the above line
      var style = this.elt.style.display;
      var hidden = this.elt.style.display === 'none';
      var parentHidden = this.parent().style.display === 'none';
      var pos = { x: this.elt.offsetLeft, y: this.elt.offsetTop };

      if (hidden) this.show();

      this.elt.style.display = 'block';
      this.position(0, 0);

      if (parentHidden) this.parent().style.display = 'block';

      var wOffset = Math.abs(this.parent().offsetWidth - this.elt.offsetWidth);
      var hOffset = Math.abs(this.parent().offsetHeight - this.elt.offsetHeight);
      var y = pos.y;
      var x = pos.x;

      if (align === 'both' || align === undefined) {
        this.position(wOffset / 2, hOffset / 2);
      } else if (align === 'horizontal') {
        this.position(wOffset / 2, y);
      } else if (align === 'vertical') {
        this.position(x, hOffset / 2);
      }

      this.style('display', style);

    if (hidden) this.hide();

    if (parentHidden) this.parent().style.display = 'none';

    return this;
  };  // end center menthod

    
    
/*  Tried to impliment "class" using code from p5.js.  But
    it turned out that it doesn't work in MyCanvas even though
    className is set as specified.  Could problem be that the
    browser doesn't recognize MyCanvas as a canvas?
    */
    this.class = function(c) {
      if (typeof c === 'undefined') {
        return this.elt.className
      }
      this.elt.className = c;
      return this;
    };

    
    this.clear = function() {
      let save = this.drawingContext;
      this.resetMatrix();
      this.drawingContext.clearRect(0,0,this.width,this.height);
      this.drawingContext = save;
    }  // end clear method

    /**
     * drawing methods
     */
    this.rectMode = function(mode) {
      if (mode === CENTER || mode === RADIUS || mode === CORNER
           || mode === CORNERS)
      {
        this._rectMode = mode;
      } else {
         print("Error: invalid rectMode("  + mode + ")");
      }
    }  // end ellipseMode method

    this.rect = function(x, y, w, h) {
      if (h == null) {
        h = w;
      }
      let xCorner, yCorner, xWidth, yHeight;
      if (this._rectMode === RADIUS) {
        xCorner = x - w ;    yCorner = y - h;
        xWidth = 2 * w;   yHeight = 2 * h;
      } else if (this._rectMode === CORNERS) {
        xCorner = x;    yCorner = y;
        xWidth = w - x;   yHeight = h - y;
      } else if (this._rectMode === CENTER) {
        xCorner = x - w/2 ;    yCorner = y - h/2;
        xWidth = w;   yHeight = h;
      } else { //   if (this._rectMode === CORNER)  --- the default
        xCorner = x;    yCorner = y;
        xWidth = w;   yHeight = h;
      }
      if (this._fillColor != null) {
        this.drawingContext.fillRect(xCorner, yCorner, xWidth, yHeight);
      }
      if (this._strokeColor != null) {
        this.drawingContext.strokeRect(xCorner, yCorner, xWidth, yHeight);
      }
    }  // end rect method

    this.square = function(x, y, w) {
      this.rect(x, y, w, w);
    }  // end square method

    this.line = function(x1, y1, x2, y2) {
      this.drawingContext.beginPath();
      this.drawingContext.moveTo(x1, y1);
      this.drawingContext.lineTo(x2, y2);
      this.drawingContext.stroke();
    }  // end line method

    this.triangle = function(x1, y1, x2, y2, x3, y3) {
      this.drawingContext.beginPath();
      this.drawingContext.moveTo(x1, y1);
      this.drawingContext.lineTo(x2, y2);
      this.drawingContext.lineTo(x3, y3);
      this.drawingContext.lineTo(x1, y1);
      if (this._fillColor != null) {
        this.drawingContext.fill();
      }
      if (this._strokeColor != null) {
        this.drawingContext.stroke();
      }
    } // end triangle method

    this.strokeCap = function(cap) {
      if (cap == SQUARE) {
        this.drawingContext.lineCap = "butt";
      } else if (cap == PROJECT) {
        this.drawingContext.lineCap = "square";
      } else {
        this.drawingContext.lineCap = "round";
      }
    }

    this.quad = function(x1, y1, x2, y2, x3, y3, x4, y4) {
      this.drawingContext.beginPath();
      this.drawingContext.moveTo(x1, y1);
      this.drawingContext.lineTo(x2, y2);
      this.drawingContext.lineTo(x3, y3);
      this.drawingContext.lineTo(x4, y4);
      this.drawingContext.lineTo(x1, y1);
      if (this._fillColor != null) {
        this.drawingContext.fill();
      }
      if (this._strokeColor != null) {
        this.drawingContext.stroke();
      }
    } // end quad method

    this.ellipseMode = function(mode) {
      if (mode === CENTER || mode === RADIUS || mode === CORNER
            || mode === CORNERS)
      {
        this._ellipseMode = mode;
      } else {
        print ("Error: invalid ellipseMode(" + mode + ")");
      }
    }  // end ellipseMode method

    this.ellipse = function(x, y, w, h) {
      if (h == null) {
        h = w;
      }
      let xCenter, yCenter, xRadius, yRadius;
      if (this._ellipseMode === RADIUS) {
        xCenter = x;    yCenter = y;
        xRadius = w;   yRadius = h;
      } else if (this._ellipseMode === CORNER) {
        xCenter = x + w/2;    yCenter = y + h/2;
        xRadius = w/2;   yRadius = h/2;
      } else if (this._ellipseMode === CORNERS) {
        xCenter = (x + w)/2;    yCenter = (y + h)/2;
        xRadius = (w - x)/2;    yRadius = (h - y)/2;
      } else { //   if (this._ellipseMode === CENTER)  --- the default
        xCenter = x;  yCenter = y;
        xRadius = w/2;   yRadius = h/2;
      }
      this.drawingContext.beginPath();
      this.drawingContext.ellipse(xCenter, yCenter, xRadius, yRadius, 0, 0, 2 * PI);
      if (this._strokeColor != null) {
        this.drawingContext.stroke();
      }
      if (this._fillColor != null) {
        this.drawingContext.fill();
      }
    }  // end ellipse method

    this.circle = function(x, y, d) {
      this.ellipse(x, y, d, d);
    } // end circle method

    this.arc = function(x, y, w, h, start, stop, mode) {
      if (h == null) {
        h = w;
      }
      let xCenter, yCenter, xRadius, yRadius;
      if (this._ellipseMode === RADIUS) {
        xCenter = x;    yCenter = y;
        xRadius = w;   yRadius = h;
      } else if (this._ellipseMode === CORNER) {
        xCenter = x + w/2;    yCenter = y + h/2;
        xRadius = w/2;   yRadius = h/2;
      } else if (this._ellipseMode === CORNERS) {
        xCenter = (x + w)/2;    yCenter = (y + h)/2;
        xRadius = (w - x)/2;    yRadius = (h - y)/2;
      } else { //   if (this._ellipseMode === CENTER)  --- the default
        xCenter = x;  yCenter = y;
        xRadius = w/2;   yRadius = h/2;
      }
      let alreadyFilled = false;
      this.drawingContext.beginPath();
      this.drawingContext.ellipse(xCenter, yCenter, xRadius, yRadius, 0,
            start, stop);
      if (mode === CHORD  || mode === PIE) {      //OPEN is the default
        let ys = (yRadius) * sin(start);  let ye = (yRadius) * sin(stop);
                    //  variable name ye neans y end (or stop)
        let xs = xRadius * cos(start); let xe = xRadius * cos(stop);
        if (mode === PIE) {
          this.drawingContext.lineTo(xCenter, yCenter);
        }
        this.drawingContext.lineTo(xCenter + xs, yCenter + ys);
      }
      if (this._fillColor != null && !alreadyFilled) {
        this.drawingContext.fill();
      }
      if (this._strokeColor != null) {
        this.drawingContext.stroke();
        }
    }  // end arc method

    this.point = function(x, y) {
      // does not use z or vector
      this.drawingContext.beginPath();
      this.drawingContext.ellipse(x, y, 1, 1, 0, 0, 2 * PI);
      if (this._strokeColor != null) {
        this.drawingContext.stroke();
      }
    } // end point method

    this.bezier =	function(x1, y1, x2, y2, x3, y3, x4, y4){
    /*  beginShape not implemented.  Used javascript method instead
    this._pInst.beginShape();
    this._pInst.vertex(x1,y1);
    this._pInst.bezierVertex(x2, y2, x3, y3, x4, y4);
    this._pInst.endShape();
    return this;
    */
    // this the method used for the javascript bezier curve
      this.drawingContext.beginPath();
      this.drawingContext.moveTo(x1, y1);
      this.drawingContext.bezierCurveTo(x2, y2, x3, y3, x4, y4);
      if (this._fillColor != null) {
        this.drawingContext.fill();
      }
      if (this._strokeColor != null) {
        this.drawingContext.stroke();
      }
      return this;
    }  // end bezier method

    this.bezierPoint  = function(a, b, c, d, t) {  // code from p5.js
      var adjustedT = 1 - t;
      return (
        Math.pow(adjustedT, 3) * a +
             3 * Math.pow(adjustedT, 2) * t * b +
             3 * adjustedT * Math.pow(t, 2) * c +
             Math.pow(t, 3) * d
      );
    }  // end bezierPoint method

    this.bezierTangent = function(a, b, c, d, t) {
      var adjustedT = 1 - t;
      return (
         3 * d * Math.pow(t, 2) -
         3 * c * Math.pow(t, 2) +
         6 * c * adjustedT * t -
         6 * b * adjustedT * t +
         3 * b * Math.pow(adjustedT, 2) -
         3 * a * Math.pow(adjustedT, 2)
      );
    }  // end bezierTangent method

   /*  not implemented
curve	function(e,t,r,i,a,n,o,s){return this._pInst.beginShape(),this._pInst.curveVertex(e,t),this._pInst.curveVertex(r,i),this._pInst.curveVertex(a,n),this._pInst.curveVertex(o,s),this._pInst.endShape(),this}	function
   */

    /**
     * Text methods
     */
    this.text = function(str, x, y) {
      // wrapping text not supported
      if (this._strokeColor != null && this._strokeText) {
        this.drawingContext.strokeText(str, x, y)
      }
      if (this._fillColor != null) {
        let saveStrokeColor = this._strokeColor;
        this._strokeColor = this._fillColor
        this.drawingContext.fillText(str, x, y);
        this._strokeColor = saveStrokeColor;
      }
    }   // end text method

    this.textSize = function(size) {
      this._textSize = size;
      let s = this._textStyle + " " + this._textSize + "px " +  this._textFont;
      this.drawingContext.font = s;
    } // end textSize method

    this.textAlign = function(horizAlign) {
      // vertical alignment not supported
      // possible values LEFT, CENTER, RIGHT
      this.drawingContext.textAlign = horizAlign;
      this._textAlign = horizAlign;
    }  // end textAlign method

    this.textFont = function(font, size) {
      // Websafe fonts: Arial, Courier New, Georgia, Times NewRomand,
      // Trebuchet MS, Vandana. Generic fonts:  san-serif, monospace,
      // cursive, fantasy, serif.
      // It appears that one must specify the font size and font name.
      // This specifies the style as well.
      this._textFont = font;
      if (size != null) {
        this._textSize = size;
      }
      let s = this._textStyle + " " +this._textSize + "px " +  this._textFont;
      this.drawingContext.font = s;
    }  // end textFont method

    this.textStyle = function(style) {
      if (style == 'bold') { this._textStyle = "bold";}
      else if (style == 'italic') { this._textStyle = "italic"; }
      else if (style == 'bold italic') { this._textStyle = "bold italic"; }
      else { this._textStyle = "normal"; }
      let s = this._textStyle + " " +this._textSize + "px " +  this._textFont;
      this.drawingContext.font = s;
    }  // end textStyle method
     
    /* 
     This doesn't work as MyCanvas text doesn't understand \n
    this.textLeading = function(lead) {
      if (typeof lead === 'number') {
        this._textLeading = lead;
        return this._pInst;
      }
      return this._textLeading;
    };
    */
     
     
     
     
     

     /**
      * transformation methods
      */
     this.rotate = function(angle) {
        // angle in radians
        this.drawingContext.rotate(angle);
     }  // end rotate method

     this.translate = function(x, y) {
        this.drawingContext.translate(x, y);
     } // end translate function

     this.scale = function(s, y) {
        // does not work with vector or z
        if (y == null) {
            y = s;
        }
        this.drawingContext.scale(s, y);
     }  // end scale method

    this.convertImageToMyCanvas = function(img) {
      return img.canvas;
    }  // end convertImageToMyCanvas method

    this.loadImage = function(path, successCallback, failureCallback) {
      // copied from p5.js with some alteration
      var pImg = new /*_main.default.*/p5.Image(1, 1, this);
      var self = this;

      var req = new Request(path, {
        method: 'GET',
        mode: 'cors'
      });

      fetch(path, req).then(function(response) {
        // GIF section
        var contentType = response.headers.get('content-type');
        if (contentType === null) {
          console.warn(
             'The image you loaded does not have a Content-Type header.'
             + ' If you are using the online editor consider reuploading'
             + ' the asset.'
          );
        }
        if (contentType && contentType.includes('image/gif')) {
          response.arrayBuffer().then(
            function(arrayBuffer) {
              if (arrayBuffer) {
                var byteArray = new Uint8Array(arrayBuffer);
                _createGif(
                  byteArray,
                  pImg,
                  successCallback,
                  failureCallback,
                  function(pImg) {
                    self._decrementPreload();
                  }.bind(self)
                );
              }
            },
            function(e) {
              if (typeof failureCallback === 'function') {
                failureCallback(e);
              } else {
                console.error(e);
              }
            }
          );

        } else {
             // Non-GIF Section
          var img = new Image();

          img.onload = function() {
            pImg.width = pImg.canvas.width = img.width;
            pImg.height = pImg.canvas.height = img.height;
            // Draw the image into the backing canvas of the p5.Image
            pImg.drawingContext.drawImage(img, 0, 0);
            pImg.modified = true;
            if (typeof successCallback === 'function') {
              successCallback(pImg);
            }
            self._decrementPreload();
          };

          img.onerror = function(e) {
          //  _main.default._friendlyFileLoadError(0, img.src);
            if (typeof failureCallback === 'function') {
                    failureCallback(e);
            } else {
              console.error(e);
            }
          };

          // Set crossOrigin in case image is served with CORS headers.
          // This will let us draw to the canvas without tainting it.
          // See https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
          // When using data-uris the file will be loaded locally
          // so we don't need to worry about crossOrigin with base64 file types.
          if (path.indexOf('data:image/') !== 0) {
            img.crossOrigin = 'Anonymous';
          }
          // start loading the image
          img.src = path;
        }
        pImg.modified = true;
      });
      return pImg.canvas;
    }  // end loadImage method

    this._decrementPreload = function() {
      // used by loadImage
      var context = this._isGlobal ? window : this;
      if (typeof context.preload === 'function') {
        context._setProperty('_preloadCount', context._preloadCount - 1);
        context._runIfPreloadsAreDone();
      }
    } // end _decrementPreload


    /**
     * image method
     */
    this.image = function(img, a2, a3, a4, a5, a6, a7, a8, a9) {
      // formats:
      // drawImage(img,x,y);
      // where x and y specify where to put the image.
      // drawImage(img,x,y,width,height);
      // where width and height specify desired size of displayed image
      // stretching or shrinking is possible.
      // drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
      // where sx, sy, swidth, sheight define a clipping of the image.
      // but there seems to be confusion about the order of parameters
      // in the 9 parameter version.
      if (a4 == null) {
         this.drawingContext.drawImage(img, a2, a3);
      }  else if (a6 == null) {
         this.drawingContext.drawImage(img, a2, a3, a4, a5);
      } else {
         this.drawingContext.drawImage(img, a2, a3, a4, a5, a6, a7, a8, a9);
      }
    }  // end image method

     /**
      * matrix methods
      */
    this.applyMatrix =	function(e, t, r, i, a, n) { // adapted from p5.js
      this.drawingContext.setTransform(e, t, r, i, a, n);
    }  // end applyMatrix method

    this.resetMatrix	= function() {  // adapted from /p5.js
      this.drawingContext.setTransform(1, 0, 0, 1, 0, 0);
      this.drawingContext.scale(this._pInst._pixelDensity, this._pInst._pixelDensity);
      return this;
    }  // end resetMatrix method


     /**
      * ***** events *****
      * Except in "moved out" type events, events only happen when the mouse
      * is over the MyCanvas.
      */
    this.mousePressed = function(fn) {
      this._attachListener("mousedown", fn);
    }  // end mousePressed method

    this.mouseReleased = function(fn) {
      this._attachListener("mouseup", fn);
    }	  // end mouseReleased method

    this.mouseClicked = function(fn) {
      this._attachListener("click", fn);
    }	  // end mouseClicked method

    this.doubleClicked = function(fn) {
      this._attachListener("dblclick", fn);
    }	  // end doubleClicked method

     // Unfortunately even return false does not block page scrolling
     // but that seems to be a problem with the p5 mouseWheel event
     // as well.
    this.mouseWheel = function(fn) {
      this._attachListener("wheel", fn);
    }	  // end mouseWheel method

    this.mouseMoved = function(fn) {
      this._attachListener("mousemove", fn);
    }	  // end mouseMoved method

    this.mouseOver = function(fn) {
      this._attachListener("mouseover", fn);
    }	  // end mouseOver method

    this.mouseOut = function(fn) {
     // This event happens when the mouse mouse moves out
     // of the MyCanvas
      this._attachListener("mouseout", fn);
    }	  // end mouseOut method

    this.keyDown = function(fn) {
      // key (not this.key) is p5.js key.  This only happens once per key
      // down but strange things may happen if more than one key pressed
      // at the same time.  this.key may be "shift', "control" , ....  It shows
      // cap letter if cap letters if shift is pressed first.
      //
      // Apparently this.canvas.addEventListener event doesn't happen for
      // keydown so we are using a global event and check on location of
      // mouse.

      this._events.keydown = fn;
      addEventListener("keydown", e => {
        if (this.isOver) {
          this._events.keydown();
        }
      });
     }  // end keyPressed method

    this.keyUp = function(fn) {
       // this happens even if the mouse has not been or is no longer in the
       // MyCanvas.
      this._events.keyup = fn;
      addEventListener("keyup", e => {
        this._events.keyup();
      });
 //   see comment in this.keyDown
 //   this.canvas.addEventListener("keyup", fn);
    }  // end keyUp method
    //  *****************************************
    ////////     Touch code is not working properly   ///////////
    //  *****************************************
    this.touches = [];
   /*  addEventListener("touchstart", e => {
               {this.populateTouches; };  }); */
     addEventListener("touchstart", this.populateTouches);
     this.touchstartX;
     this.touchstartY;
//     this.touchstartFn = null;
     this.touchStarted = function(fn){  // untested
//          this.touchstartFn = fn;
          this._events.touchstart = fn;
          addEventListener("touchstart", e => {
          if (event.target.id == this._id)
//               {this.touchstartFn()}});
               {this._events.touchstart()}});
     }	  // end touchStarted method

//     this.touchmoveFn = null;
     this.touchMoved = function(fn){   //untested
//          this.touchmoveFn = fn;
       this._events.touchemove = fn;
          addEventListener("touchmove", e => {
          //  alert("moved\n" +listMembers(event, "code", "object") + " \n\n" + listMembers(event.touches));
//            if (event.target.id == this._id) {this.touchmoveFn()}});
            if (event.target.id == this._id) {this._events.touchmove()}});
   }	  // end touchMoved method

 //    this.touchendFn = null;
     this.touchEnded = function(fn){  /// untested
 //         this.touchendFn = fn;
          this._events.touchend = fn;
          addEventListener("touchend", e => {
 //           if (event.target.id == this._id) {this.touchendFn()}});
            if (event.target.id == this._id) {this._events.touchend()}});
    }	  // end touchEnded method

  // ****************************************
    /**
     * these drag events work but are not too useful because the drop
     * event does not work
     */

    this._dragStarted = false;
    this.dragOver = function(fn) {
      this._attachListener("dragover", fn);
    }  // end dragOver method

    this.dragLeave = function(fn) {
      this._attachListener("dragleave", fn);
   }	  // end dragOver method

    this._dragDisabled = false;
    let _parent;  // parent of the MyCanvas

    this.drop = function(callback, fxn) {
      // adapted from https://www.html5rocks.com/en/tutorials/file/dndfiles/
      _parent = this.parent().id;
      _drop = callback;
      _fxn = fxn;
      this.canvas.addEventListener('dragleave', fxn);
      this.canvas.addEventListener('drop', e => {
        e.stopPropagation();
        e.preventDefault();
        this._processFiles(e);
      });
    }  // end drop method

    /**
     * this._processes files for this.drop and this.browse.
     * It is a callback function that get a array of file names
     * from event e.  Files are processed asynchronous after they
     * are read (except for "other" files that are not actually
     * read.
     */
    this._processFiles = function(e) {
      // Is the file stuff supported?
      if (window.File && window.FileReader && window.FileList
           && window.Blob)
      {
        if (e.dataTransfer) { // for drop event
          var files = e.dataTransfer.files;
        } else {
          files = e.target.files;
        }

        for (var i = 0, f; f = files[i]; i++) { //for each file dropped
          var types = split(f.type, "/");
          var fileType = types[0];
          var fileSubtype = types[1];
          var reader = new FileReader();

          if (fileType == "image") {
            // Need a closure to capture the file information.
            reader.onload = (function(theFile) {
              return function(e) {

                var commonStuff = __getCommonFileStuff(e, theFile);
                var imgId = commonStuff.imgId;
                var span = commonStuff.span;
                var theHTMLImag = document.getElementById(imgId);
                var returnObj = commonStuff.returnObj;
                // customize returnObj for images
                returnObj.infoThumb = function(style) {
                          var img = document.getElementById(imgId);
                          // if img.naturalHeight is 0, it probably means that
                          // the natural height is missing.
                          if(img.naturalHeight > 0 && img.naturalHeight < 60) {
                          // do nothing for small images
                          } else  {
                            if (style) {  // use the user supplied style
                              img.style = style;
                            } else {// default style for thumbs
                              img.style = "height: 60px; padding: 3px;";
                            }
                          }
                  };
                returnObj.thumb = function(style) {
                          // first remove the "info"
                          span.innerHTML = '<img id = "' + imgId
                            + '" src="' + e.target.result + '" title="'
                            +encodeURI(theFile.name) + '"/>';
                          var img = document.getElementById(imgId);
                          if(img.naturalHeight > 0 && img.naturalHeight < 60) {
                          // do nothing for small images
                          } else  {
                            if (style) {  // use the user supplied style
                              img.style = style;
                            } else {// default style for thumbs
                              img.style = "height: 60px; padding: 3px;";
                            }
                          }
                 };
                returnObj.click = function(clickProcessor) {
                  span.onclick = clickProcessor;
                }
                returnObj.parent = function(parent) {
                  if (parent.child) {
                    parent.child(span);   // works sometimes
                  } else
                    parent.appendChild(span);

                }
                returnObj.data = theHTMLImag;
                _drop(returnObj);
              };
            })(f);
            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
          } else if (fileType == "text"  || f.type == "application/x-javascript"
                 || f.type == "application/javascript")
          {
            reader.onload = (function(theFile) {
              return function(e) {
                var commonStuff = __getCommonFileStuff(e, theFile);
                var returnObj = commonStuff.returnObj;
                var contents = e.target.result;
                // customize returnObj for text
                returnObj.data = contents
                _drop(returnObj);
              };
      //      reader.onerror = function(f) {
      //        console.error("File could not be read! Code " + e.target.error.code);
      //      };
            })(f);
            // read as text
            reader.readAsText(f);

            // other files
          } else {  // these files are not read
            var commonStuff = __getCommonFileStuff(e, f);
            console.log("Cannot handle " + commonStuff.name + ". Type: "
                 + commonStuff.fileType);
            commonStuff.returnObj.data = "";
         // no customization of returnObj needed
            _drop(commonStuff.returnObj);
          }
        }
      } else {
        console.log('The File APIs are not fully supported in this browser.');
      }
      if(_fxn) {
        _fxn();  // call back after all file processed
      }
      return this;

    }  // _processFiles


    /**
     * __getCommonStuff doew a lot of things that are common to the
     * three groups of file types.
     * determines the fileType and fileSubType
     * creates the "info" about the file
     * gets an idNum and creates ids for the span and image
     * creates a span to hold info and the image (if there is one)
     * puts the span into the parent of the canvas
     * creates returnObj that contains the basic information
     *    about the file.  Additional items may eventually be added
     *    depending on the file type.
     * returns returns an object containing returnObj and other info.
     */
    var __getCommonFileStuff = function(e, f) {
      var types = split(f.type, "/");
      var fileType = types[0];
      if (types.length == 1) {
        fileType = "Unknown";
      }
      var fileSubtype = types[1];

      var info = '<br><strong>' + /*escape(*/f.name/*)*/
           + '</strong> (' + (f.type || 'n/a') + ') - '
           + f.size + ' bytes';
      var idNum = floor(random(100000));
      var spanId = "S" + idNum;
      var imgId = "I" + idNum;
      var span = document.createElement('span');
      span.id = spanId;
      if (fileType == "image") {
      var innerStr = info + " " + '<img id = "' + imgId
              + '"' + ' src="' + e.target.result + '" title="'
              + encodeURI(f.name) + '"/>';
      } else {
       innerStr = info;
      }

      span.innerHTML = innerStr;
      document.getElementById(_parent).insertBefore(span, null);

      var returnObj = {  //standard returnObj
        name: f.name,
        size: f.size,
        type: fileType,
        subtype: fileSubtype,
        idNum: idNum,
        hide: function() {
          var prnt = document.getElementById("S" + idNum);
          prnt.style = "display: none";
        }
      }
      var returnStuff = {
        fileType: fileType,
        //fileSubtype: fileSubtype,
        //idNum: idNum,
       // info: info,
       // idNum:  idNum,
       // spanId: spanId,
        name: f.name,
        imgId: imgId,
        span: span,
        returnObj: returnObj,
      }
      return returnStuff;
    }  // end __getCommonFileStuff

    this.browse = function (callback, fxn) {
      // adapted from https://www.html5rocks.com/en/tutorials/file/dndfiles/
      /**
       * creates input button labeled "Browse" that causes a file dialog
       * to be shown.  In many browsers, one can drop files on the button
       */
      _parent = this.parent().id;
      _drop = callback;
      _fxn = fxn;
      var browseInput = document.createElement("input");
      browseInput.id = "files";
      browseInput.type = "file";
      browseInput.name = "files[]";
      browseInput.multiple = "multiple";
      let par = document.getElementById(_parent);
      par.appendChild(browseInput);
      browseInput.addEventListener('dragleave', fxn);
      browseInput.addEventListener('change', e => {
        e.stopPropagation();
        e.preventDefault();
        this._processFiles(e);
      });
      return browseInput;

    }

  // ****************************************

     this._attachListener = function(ev, fxn) {
            // detach the old listener if there was one
            if (this._events[ev]) {
              var f = this._events[ev];
              this.canvas.removeEventListener(ev, f, false);
              this._events[ev] = null;
            }
            if (fxn) {
              this.canvas.addEventListener(ev, fxn, false);
              this._events[ev] = fxn;
            }
     };

    this._events = {  // copied from p5.js
      // keep track of user-events for unregistering later
      mousemove: null,
      mousedown: null,
      mouseup: null,
      dragleave: null,
      dragover: null,
      click: null,
      dblclick: null,
      mouseover: null,
      mouseout: null,
      keydown: null,
      keyup: null,
      keypress: null,
      touchstart: null,
      touchmove: null,
      touchend: null,
      resize: null,
      blur: null
    };

    /**
     * Set some default values
     */
     this.strokeWeight(1);
     this.fill(255, 255, 255, 255);
     this.textFont("sans-serif");   // sets default text size and font

     /**
      * Set events that help determine boolean value this.isOver,
      * mouseX, mouseY, and keyPressed.
      * The event handler functions follow the end of the constructor.
      */

    this.canvas.addEventListener("mousedown", e => {
      this._mouseDown();});
    this.canvas.addEventListener("mouseup", e => {
      this._mouseUp();});
    this.canvas.addEventListener("mouseover", e => {
      this._mouseOver();});
    this.canvas.addEventListener("mouseout", e => {
      this._mouseOut();});
    this.canvas.addEventListener("mousemove", e => {
      this._mouseMove(e);});
    this.canvas.addEventListener("dragover", e => {
      this._dragOver(e);});
    this.canvas.addEventListener("dragleave", e => {
      this._dragLeave(e);});

    addEventListener("keydown", e => {   // there is no this.canvas event
      this._keyDown();});
    addEventListener("keyup", e => {
      this._keyUp();});

  /*****************************************
   * The end of the constructor!           *
   *****************************************/
  }   // end constructor


  /**
   *  Event handler functions for "built in" event handlers
   *  They were set in the end of the constructor where they
   *  were referred to with this.xxx
   */
  _keyDown() {  // this is a global event
    if (this.isOver) { // so check if the mouse is over MyCanvas
      this.keyIsPressed = true;
    }
  }  //end _keyDown

  _keyUp() {  // really don't care where the mouse is
    this.keyIsPressed = false;
  }  // end _keyup

  _mouseOver() {
    this.isOver = true;
  } // end _mouseOver

  _mouseOut() {
    this.isOver = false;
  }  // end _mouseOut

  _mouseMove(e) {
    this.mouseX = e.offsetX;
    this.mouseY = e.offsetY;
    // this._over();  // update every time mouse moves
  }  // end _mouseMove

  _mouseDown() {
    this.mouseIsPressed = true;
 //    this._over();
  }  // end _mouseDown

  _mouseUp() {
    this.mouseIsPressed = false;
 //     this._over();  // update every time mouse moves
  }  // end _mouseUp

  _dragOver(e) {
    this._dragStarted = true;
    this.mouseX = e.offsetX;
    this.mouseY = e.offsetY;
    this.isOver = true;
    e.stopPropagation();
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy'; // Explicitly show this
  }  // end _dragOver

  _dragLeave(e) {
    if (this._dragStarted) {
      this.isOver = false;
      this._dragStarted = false;
    }
  }  // end _dragLeave


 /**
   * couldn't get touches to work
   */
/*
  touchesElement(w, h, evt, i) {
        if (evt && !evt.clientX) {
        // use touches if touch and not mouse
           if (evt.touches) {
             evt = evt.touches[i];
           } else if (evt.changedTouches) {
             evt = evt.changedTouches[i];
           }
        }
        var rect =this.canvas.getBoundingClientRect();
        var sx = this.canvas.scrollWidth / w || 1;
        var sy = this.canvas.scrollHeight / h || 1;
        return {
           x: (evt.clientX - rect.left) / sx,
           y: (evt.clientY - rect.top) / sy,
           winX: evt.clientX,
           winY: evt.clientY,
           id: evt.identifier
        };
     }  //  touchesElement

     populateTouches(evt) {
        this.touches = [];
       print("in populateTouches" + listMembers(evt) );
       print("-------- evt.touches\n " + listMembers(evt.touches));
       print("---------evt.targetTouches\n " + listMembers(evt.targetTouches));
        for (let i = 0; i < evt.touches.length; i++) {
  //          this.touches[i] = this.touchesElement(this.width, this.height, evt.touches, i);
         if (evt && !evt.clientX) {
        // use touches if touch and not mouse
           if (evt.touches) {
             evt = evt.touches[i];
           } else if (evt.changedTouches) {
             evt = evt.changedTouches[i];
           }
        }
        var rect =this.canvas.getBoundingClientRect();
        var sx = this.canvas.scrollWidth / this.width || 1;
        var sy = this.canvas.scrollHeight / this.height || 1;
         this.touches[i] = {
           x: (evt.clientX - rect.left) / sx,
           y: (evt.clientY - rect.top) / sy,
           winX: evt.clientX,
           winY: evt.clientY,
           id: evt.identifier
        };

         }
         print("touches" + "\n" + listMembers(this.touches));
        if (this.touches.length > 0) {
          this.pmouseX = this.touches[0].x;
          this.pmouseY = this.touches[0].y;
          print(" pmouse:  " + this.pmouseX + ", " + this.pmouseY);
         }


     }  // populateTouches
*/

}  // end MyCanvas

var _drop = null;  // for this.drop and this.browse
var _click = null;  // for clicking image in sthis.drop and this.browse
let _fxn = null;