Clean up canvas creation

Don't pretend the canvas making helper is a class

src/$ColorBox.js

@@ -2,7 +2,7 @@
 
 function $Swatch(color){
 	const $b = $(E("div")).addClass("swatch");
-	const swatch_canvas = new Canvas();
+	const swatch_canvas = make_canvas();
 	$(swatch_canvas).css({pointerEvents: "none"}).appendTo($b);
 	
 	$b.update = _color => {

src/OnCanvasHelperLayer.js

@@ -7,7 +7,7 @@ class OnCanvasHelperLayer extends OnCanvasObject {
 			pointerEvents: "none",
 		});
 		this.position();
-		this.canvas = new Canvas(this.width * pixelRatio, this.height * pixelRatio);
+		this.canvas = make_canvas(this.width * pixelRatio, this.height * pixelRatio);
 		this.$el.append(this.canvas);
 	}
 }

src/OnCanvasSelection.js

@@ -40,7 +40,7 @@ class OnCanvasSelection extends OnCanvasObject {
 				// NOTE: need to create a Canvas because something about imgs makes dragging not work with magnification
 				// (width vs naturalWidth?)
 				// and at least apply_image_transformation needs it to be a canvas now (and the property name says canvas anyways)
-				this.source_canvas = new Canvas(_img);
+				this.source_canvas = make_canvas(_img);
 				// TODO: is this width/height code needed? probably not! wouldn't it clear the canvas anyways?
 				// but maybe we should assert in some way that the widths are the same, or resize the selection?
 				if (this.source_canvas.width !== this.width) {
@@ -49,12 +49,12 @@ class OnCanvasSelection extends OnCanvasObject {
 				if (this.source_canvas.height !== this.height) {
 					this.source_canvas.height = this.height;
 				}
-				this.canvas = new Canvas(this.source_canvas);
+				this.canvas = make_canvas(this.source_canvas);
 			}
 			else {
-				this.source_canvas = new Canvas(this.width, this.height);
+				this.source_canvas = make_canvas(this.width, this.height);
 				this.source_canvas.ctx.drawImage(canvas, this.x, this.y, this.width, this.height, 0, 0, this.width, this.height);
-				this.canvas = new Canvas(this.source_canvas);
+				this.canvas = make_canvas(this.source_canvas);
 				if (!_passive) {
 					this.cut_out_background();
 				}
@@ -125,7 +125,7 @@ class OnCanvasSelection extends OnCanvasObject {
 		// if(!transparency){ // now if !transparency or if tool_transparent_mode
 		// this is mainly in order to support patterns as the background color
 		// NOTE: must come before cutout canvas is modified
-		const colored_cutout = new Canvas(cutout);
+		const colored_cutout = make_canvas(cutout);
 		replace_colors_with_swatch(colored_cutout.ctx, colors.background, this.x, this.y);
 		// var colored_cutout_image_data = colored_cutout.ctx.getImageData(0, 0, this.width, this.height);
 		// }
@@ -203,7 +203,7 @@ class OnCanvasSelection extends OnCanvasObject {
 	// TODO: should Image > Invert apply to this.source_canvas or to this.canvas (replacing this.source_canvas with the result)?
 	replace_source_canvas(new_source_canvas) {
 		this.source_canvas = new_source_canvas;
-		const new_canvas = new Canvas(new_source_canvas);
+		const new_canvas = make_canvas(new_source_canvas);
 		$(this.canvas).replaceWith(new_canvas);
 		this.canvas = new_canvas;
 		const center_x = this.x + this.width / 2;
@@ -228,12 +228,12 @@ class OnCanvasSelection extends OnCanvasObject {
 		this.update_tool_transparent_mode();
 	}
 	resize() {
-		const new_source_canvas = new Canvas(this.width, this.height);
+		const new_source_canvas = make_canvas(this.width, this.height);
 		new_source_canvas.ctx.drawImage(this.source_canvas, 0, 0, this.width, this.height);
 		this.replace_source_canvas(new_source_canvas);
 	}
 	scale(factor) {
-		const new_source_canvas = new Canvas(this.width * factor, this.height * factor);
+		const new_source_canvas = make_canvas(this.width * factor, this.height * factor);
 		new_source_canvas.ctx.drawImage(this.source_canvas, 0, 0, new_source_canvas.width, new_source_canvas.height);
 		this.replace_source_canvas(new_source_canvas);
 	}

src/app.js

@@ -11,7 +11,7 @@ const default_canvas_height = 384;
 let my_canvas_width = default_canvas_width;
 let my_canvas_height = default_canvas_height;
 
-const canvas = new Canvas();
+const canvas = make_canvas();
 canvas.classList.add("main-canvas");
 const ctx = canvas.ctx;
 
@@ -158,7 +158,7 @@ $canvas.on("user-resized", (e, _x, _y, width, height) => {
 
 		const previous_imagedata = undos[undos.length-1];
 		if(previous_imagedata){
-			const temp_canvas = new Canvas(previous_imagedata);
+			const temp_canvas = make_canvas(previous_imagedata);
 			ctx.drawImage(temp_canvas, 0, 0);
 		}
 

src/electron-injected.js

@@ -147,7 +147,7 @@ window.systemSetAsWallpaperCentered = c => {
 	if(process.platform === "darwin"){
 		wallpaperCanvas = c;
 	}else{
-		wallpaperCanvas = new Canvas(screen.width, screen.height);
+		wallpaperCanvas = make_canvas(screen.width, screen.height);
 		const x = (screen.width - c.width) / 2;
 		const y = (screen.height - c.height) / 2;
 		wallpaperCanvas.ctx.drawImage(c, ~~x, ~~y);

src/functions.js

@@ -791,7 +791,7 @@ function render_history_as_gif(){
 			$win.center();
 		});
 
-		const gif_canvas = new Canvas(width, height);
+		const gif_canvas = make_canvas(width, height);
 		const frames = [...undos, ctx.getImageData(0, 0, canvas.width, canvas.height)];
 		for(let i=0; i<frames.length; i++){
 			gif_canvas.ctx.clearRect(0, 0, gif_canvas.width, gif_canvas.height);
@@ -1536,7 +1536,7 @@ function set_as_wallpaper_tiled(c){
 		return window.systemSetAsWallpaperTiled(c);
 	}
 
-	const wallpaperCanvas = new Canvas(screen.width, screen.height);
+	const wallpaperCanvas = make_canvas(screen.width, screen.height);
 	const pattern = wallpaperCanvas.ctx.createPattern(c, "repeat");
 	wallpaperCanvas.ctx.fillStyle = pattern;
 	wallpaperCanvas.ctx.fillRect(0, 0, wallpaperCanvas.width, wallpaperCanvas.height);

src/helpers.js

@@ -32,7 +32,7 @@ function E(t){
 }
 
 function get_rgba_from_color(color){
-	const single_pixel_canvas = new Canvas(1, 1);
+	const single_pixel_canvas = make_canvas(1, 1);
 	
 	single_pixel_canvas.ctx.fillStyle = color;
 	single_pixel_canvas.ctx.fillRect(0, 0, 1, 1);
@@ -44,7 +44,7 @@ function get_rgba_from_color(color){
 	return Array.from(image_data.data);
 }
 
-function Canvas(width, height){
+function make_canvas(width, height){
 	const image = width;
 	
 	const new_canvas = E("canvas");
@@ -67,7 +67,7 @@ function Canvas(width, height){
 	
 	// TODO: simplify the abstraction by defining setters for width/height
 	// that reset the image smoothing to disabled
-	// and remove all external calls to disable_image_smoothing
+	// and make image smoothing a parameter to make_canvas
 	
 	new_ctx.copy = image => {
 		new_canvas.width = image.naturalWidth || image.width;
@@ -84,13 +84,13 @@ function Canvas(width, height){
 	};
 	
 	if(width && height){
-		// new Canvas(width, height)
+		// make_canvas(width, height)
 		new_canvas.width = width;
 		new_canvas.height = height;
 		// setting width/height resets image smoothing (along with everything)
 		new_ctx.disable_image_smoothing();
 	}else if(image){
-		// new Canvas(image)
+		// make_canvas(image)
 		new_ctx.copy(image);
 	}
 	

src/image-manipulation.js

@@ -131,7 +131,7 @@ function update_brush_for_drawing_lines(stroke_size){
 		){
 			// don't need to do brush_ctx.disable_image_smoothing() currently because images aren't drawn to the brush
 			const csz = get_brush_canvas_size(stroke_size, "circle");
-			line_brush_canvas = new Canvas(csz, csz);
+			line_brush_canvas = make_canvas(csz, csz);
 			line_brush_canvas.width = csz;
 			line_brush_canvas.height = csz;
 			line_brush_canvas.ctx.fillStyle = line_brush_canvas.ctx.strokeStyle = stroke_color;
@@ -363,7 +363,7 @@ function apply_image_transformation(fn){
 	// Apply an image transformation function to either the selection or the entire canvas
 	const original_canvas = selection ? selection.source_canvas: canvas;
 	
-	const new_canvas = new Canvas(original_canvas.width, original_canvas.height);
+	const new_canvas = make_canvas(original_canvas.width, original_canvas.height);
 
 	const original_ctx = original_canvas.getContext("2d");
 	const new_ctx = new_canvas.getContext("2d");
@@ -594,7 +594,7 @@ let grid_pattern;
 function draw_grid(ctx, scale) {
 	const pattern_size = Math.floor(scale); // TODO: try ceil too
 	if (!grid_pattern || grid_pattern.width !== pattern_size || grid_pattern.height !== pattern_size) {
-		const grid_pattern_canvas = new Canvas(pattern_size, pattern_size);
+		const grid_pattern_canvas = make_canvas(pattern_size, pattern_size);
 		const dark_gray = "#808080";
 		const light_gray = "#c0c0c0";
 		grid_pattern_canvas.ctx.fillStyle = dark_gray;
@@ -912,15 +912,15 @@ function draw_grid(ctx, scale) {
 		const height = y_max - y_min;
 		
 		// TODO: maybe have the cutout only the width/height of the bounds
-		// var cutout = new Canvas(width, height);
+		// var cutout = make_canvas(width, height);
-		const cutout = new Canvas(canvas);
+		const cutout = make_canvas(canvas);
 
 		cutout.ctx.save();
 		cutout.ctx.globalCompositeOperation = "destination-in";
 		draw_polygon(cutout.ctx, points, false, true);
 		cutout.ctx.restore();
 		
-		const cutout_crop = new Canvas(width, height);
+		const cutout_crop = make_canvas(width, height);
 		cutout_crop.ctx.drawImage(cutout, x_min, y_min, width, height, 0, 0, width, height);
 
 		return cutout_crop;

src/sessions.js

@@ -278,7 +278,7 @@
 				// @TODO: display other cursor types?
 				// @TODO: display pointer button state?
 				// @TODO: display selections
-				const cursor_canvas = new Canvas(32, 32);
+				const cursor_canvas = make_canvas(32, 32);
 				// Make the cursor element
 				const $cursor = $(cursor_canvas).addClass("user-cursor").appendTo($app);
 				$cursor.css({

src/tool-options.js

@@ -1,5 +1,5 @@
 
-const brush_canvas = new Canvas();
+const brush_canvas = make_canvas();
 const brush_ctx = brush_canvas.ctx;
 let brush_shape = "circle";
 let brush_size = 4;
@@ -23,7 +23,7 @@ const ChooserCanvas = (
     destWidth,
     destHeight
 ) => {
-	const c = new Canvas(width, height);
+	const c = make_canvas(width, height);
 	let img = ChooserCanvas.cache[url];
 	if(!img){
 		img = ChooserCanvas.cache[url] = E("img");
@@ -100,7 +100,7 @@ const $ChooseShapeStyle = () => {
 			{stroke: false, fill: true}
 		],
 		(a, is_chosen) => {
-			const sscanvas = new Canvas(39, 21);
+			const sscanvas = make_canvas(39, 21);
 			const ssctx = sscanvas.ctx;
 			
 			// border px inwards amount
@@ -154,7 +154,7 @@ const $choose_brush = $Choose((() => {
     });
     return things;
 })(), (o, is_chosen) => {
-    const cbcanvas = new Canvas(10, 10);
+    const cbcanvas = make_canvas(10, 10);
     
     const shape = o.shape;
     const size = o.size;
@@ -174,7 +174,7 @@ const $choose_brush = $Choose((() => {
 const $choose_eraser_size = $Choose(
 	[4, 6, 8, 10],
 	(size, is_chosen) => {
-		const cecanvas = new Canvas(39, 16);
+		const cecanvas = make_canvas(39, 16);
 		
 		cecanvas.ctx.fillStyle = is_chosen ? "#fff" : "#000";
 		render_brush(cecanvas.ctx, "square", size);
@@ -191,7 +191,7 @@ const $choose_stroke_size = $Choose(
 	[1, 2, 3, 4, 5],
 	(size, is_chosen) => {
 		const w = 39, h = 12, b = 5;
-		const cscanvas = new Canvas(w, h);
+		const cscanvas = make_canvas(w, h);
 		const center_y = (h - size) / 2;
 		cscanvas.ctx.fillStyle = is_chosen ? "#fff" : "#000";
 		cscanvas.ctx.fillRect(b, ~~center_y, w - b*2, size);

src/tools.js

@@ -24,7 +24,7 @@ tools = [{
 		this.y_min = pointer.y;
 		this.y_max = pointer.y+1;
 		this.points = [];
-		this.preview_canvas = new Canvas(canvas.width, canvas.height);
+		this.preview_canvas = make_canvas(canvas.width, canvas.height);
 
 		// End prior selection, drawing it to the canvas
 		deselect();
@@ -437,7 +437,7 @@ tools = [{
 	cursor: ["pencil", [13, 23], "crosshair"],
 	continuous: "space",
 	stroke_only: true,
-	pencil_canvas: Canvas(),
+	pencil_canvas: make_canvas(),
 	paint(ctx, x, y) {
 		// XXX: WET (Write Everything Twice) / DAMP (Duplicate Anything Moderately Pastable) (I'm coining that)
 		// TODO: DRY (Don't Repeat Yourself) / DEHYDRATE (Delete Everything Hindering Yourself Drastically Reducing Aqueous Text Evil) (I'm coining that too)