HTML Canvas - Pattern Editor

by black strings

HTML

<div id="patternOnly">

</div>

JavaScript

// on creation, this sprite draws itself. The image lives on the image property

// ====================================
// SPRITE 
// ====================================
class Sprite{
	constructor(ppi, width, height, x=0, y=0, color='#ff0000', name='noNameSet'){
  
    // pixes per inch
    this.ppi = ppi;
    
  	this.width = width * this.ppi;
    this.height = height * this.ppi;
    this.x = x * this.ppi;
    this.y = y * this.ppi;
    
  	this.name = name;
    this.image = null;
    this.bgColor = color;
    
    // draw a solid background to represent itself for now
    this.draw();
  }
  setImage(img){
  	this.image = img;
  }
  // clears the sprite by creating a empty canvas and exporting the image
  /*
  clear() {
  	//this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    var canvas = this.getCanvas();
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, this.width, this.height);
    var img = new Image();
    img.src = canvas.toDataURL();
    this.setImage(img);
  }
  setBgColor(colorStrHex){
  	this.bgColor = colorStrHex;
  }
  */
  // returns a canvas with the same width and height as the sprite
  getCanvas(){
  	// this is a throw a way canvas only temporarily
  	var canvas = document.createElement('canvas');
    // no no don't set the size this way won't work at times, and you get no img when extracting
    //canvas.width = this.width;
    //canvas.height = this.height;
    
    // set the size this way
    canvas.setAttribute('width', this.width);
    canvas.setAttribute('height', this.height);
    return canvas;
  }
  // draws the sprite and sets its image property for later
  draw(){
  	// because when you draw, to an image, there is async going on, later you'll have to use a promise
    // to ensure the image is given time to set on the sprite, before you use the image on the sprite
  	//return new Promise( (resolve, reject) => {
    
    	//console.log('drawing');
      var canvas = this.getCanvas();
      var ctx =...