Example class for SugarCube

Sprite.js

/**
 * @param {string} tex 
 * @param {number[]} rect 
 */
var Sprite = function Sprite(tex, rect) {
	var sp = this;
	sp.tex = String(tex);
	if (Array.isArray(rect)) {
		if (rect.length != 4) {
			throw new Error("new Sprite(): rect parameter needs to be exactly four numbers long - [x, y, width, height]");
		}
		sp.x = Number(rect[0]);
		sp.y = Number(rect[1]);
		sp.w = Number(rect[2]);
		sp.h = Number(rect[3]);
		sp.cropped = true;
	}
	sp.loaded = false;
	sp.read = new Promise(function (resolve, reject) {
		sp.img = new Image();
		sp.img.setAttribute('crossOrigin', 'anonymous');
		sp.img.onload = function () {
			if (!sp.cropped) {
				sp.x = 0;
				sp.y = 0;
				sp.w = sp.img.width;
				sp.h = sp.img.height;
			}
			sp.loaded = true;
			resolve(sp);
		};
		sp.img.src = sp.tex;
	});
};

/**
 * Helper method to get a canvas object out of a string ID or HTMLCanvasElement element
 * 
 * @param {CanvasRenderingContext2D | HTMLCanvasElement | string} ctx
 * @returns {CanvasRenderingContext2D} the corresponding canvas object, or undefined
 */
function getContext(ctx) {
	if(typeof ctx === "string") {
		ctx = document.getElementById(ctx);
	}
	if(ctx && typeof ctx.getContext === "function") {
		return ctx.getContext("2d");
	}
	return ctx;
};

/**
 * @param {CanvasRenderingContext2D | HTMLCanvasElement | string} ctx 
 * @param {number} x 
 * @param {number} y 
 */
Sprite.prototype.draw = function draw(ctx, x, y) {
	ctx = getContext(ctx);
	x = Number(x) || 0;
	y = Number(y) || 0;
	var sprite = this;
	this.read.then(function () {
		ctx.drawImage(sprite.img, sprite.x, sprite.y, sprite.w, sprite.h, x, y, sprite.w, sprite.h);
	});
};

/**
 * @param {CanvasRenderingContext2D | HTMLCanvasElement | string} ctx 
 * @param {number} x 
 * @param {number} y 
 * @param {number} scale
 */
Sprite.prototype.drawScaled = function drawScaled(ctx, x, y, scale) {
	ctx = getContext(ctx);
	x = Number(x) || 0;
	y = Number(y) || 0;
	scale = Number(scale) || 1.0;
	var sprite = this;
	this.read.then(function () {
		ctx.drawImage(sprite.img, sprite.x, sprite.y, sprite.w, sprite.h, x, y, sprite.w * scale, sprite.h * scale);
	});
};


/**
 * Cropped Sprites only work after being loaded.
 */
Sprite.prototype.image = function image() {
	if (!this.cropped) {
		return "<img src=" + JSON.stringify(this.tex) + " />";
	} else {
		return "<img src=" + JSON.stringify(this.canvas().toDataURL()) + " />";
	}
};

/**
 * Only works after the Sprite is loaded.
 * 
 * @returns {HTMLCanvasElement} A canvas element filled with the image
 */
Sprite.prototype.canvas = function canvas() {
	const canvas = document.createElement("canvas");
	canvas.width = this.w; canvas.height = this.h;
	this.draw(canvas.getContext("2d"), 0, 0);
	return canvas;
};

Sprite.prototype.toJSON = function toJSON() {
	return JSON.reviveWrapper(
		"setup.Sprite.create("
		+ JSON.stringify(this.tex)
		+ (this.cropped
			? ", [" + this.x + "," + this.y + "," + this.w + "," + this.h + "])"
			: ")")
	);
};

/**
 * @returns {Sprite} a copy of the Sprite instance
 */
Sprite.prototype.clone = function clone() {
	return new Sprite(this.tex, this.cropped ? [this.x, this.y, this.w, this.h] : undefined);
};

/**
 * @param {string} tex 
 * @param {number[]} rect 
 */
Sprite.create = function (tex, rect) {
	return new Sprite(tex, rect);
};

setup.Sprite = Sprite;