aspect ratio resizing

app/canvas_handler.ts

@@ -3,36 +3,45 @@ import { ICanvasData } from './Interfaces/ICanvasData';
 
 // I display the canvas and am clickable
 export class CanvasHandler {
-	private currentImageDiv: HTMLElement;
 	private canvasImage: HTMLCanvasElement;
 	private imageElement: HTMLImageElement;
 	private animationData: IAnimationData;
 	private canvasData: ICanvasData;
 	private orginInfo: HTMLElement;
 
+	private targetImageSize: number = 256;
+
 	constructor(
 		animationData: IAnimationData,
 		canvasData: ICanvasData,
 		canvasImage: HTMLCanvasElement,
-		currentImageDiv: HTMLElement,
 		imageElement: HTMLImageElement,
 		originInfo: HTMLElement
 	) {
 		this.animationData = animationData;
 		this.canvasData = canvasData;
 		this.canvasImage = canvasImage;
-		this.currentImageDiv = currentImageDiv;
 		this.imageElement = imageElement;
 		this.orginInfo = originInfo;
 
-		//setup canvas
+		this.ResizeCanvas();
-		this.canvasImage.width = 256;
-		this.canvasImage.height = 256;
 		this.UpdateCanvasDataSize();
 		const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!;
-		canvasContext.fillRect(0, 0, 256, 256);
+		canvasContext.fillRect(0, 0, this.targetImageSize, this.targetImageSize);
+		canvasContext.imageSmoothingEnabled = false;
 
-		this.currentImageDiv.addEventListener('click', this.mouseDown);
+		this.canvasImage.addEventListener('click', this.mouseDown);
+	}
+
+	public ResizeCanvas() {
+		// get image ratio, then scale default width by it
+		const hwratio = this.imageElement.height / this.imageElement.width;
+		const newWidth = this.targetImageSize / hwratio;
+		const newHeight = this.targetImageSize;
+		console.log('hwratio = ' + hwratio);
+		this.canvasImage.width = newWidth;
+		this.canvasImage.height = newHeight;
+		this.UpdateCanvasDataSize();
 	}
 
 	private UpdateCanvasDataSize() {

app/frame_handler.ts

@@ -33,7 +33,6 @@ export class FrameHandler {
 		this.frameNumberDiv = frameNumberDiv;
 		window.requestAnimationFrame(this.windowAnimationUpdate);
 		this.imageElement = imageElement;
-		this.canvasContext.imageSmoothingEnabled = false;
 	}
 
 	public GetCurrentFrame(): number {
@@ -74,6 +73,7 @@ export class FrameHandler {
 			this.frameNumberDiv.innerText = 'No images uploaded yet';
 		} else {
 			this.canvasContext.clearRect(0, 0, this.htmlCanvasElement.width, this.htmlCanvasElement.height);
+			this.canvasContext.imageSmoothingEnabled = false;
 			this.imageElement.src = this.filenames[this.currentFrame];
 			// draw sprite
 			this.canvasContext.drawImage(
@@ -93,7 +93,6 @@ export class FrameHandler {
 			this.canvasContext.moveTo(originX - originCursorSize, originY);
 			this.canvasContext.lineTo(originX + originCursorSize, originY);
 			this.canvasContext.stroke();
-
 			this.frameNumberDiv.className = 'instruction';
 			this.frameNumberDiv.innerText =
 				'Frame  ' + (this.currentFrame + 1).toString() + ' / ' + this.filenames.length.toString();

app/page.ts

@@ -58,7 +58,6 @@ export class Page {
 			this.animationData,
 			this.canvasData,
 			canvasElement,
-			document.getElementById('currentImage') as HTMLElement,
 			imageElement,
 			document.getElementById('originInfo') as HTMLElement
 		);
@@ -172,7 +171,9 @@ export class Page {
 		this.frameHandler.GoToFrame(0);
 		this.frameHandler.StopPlayingAnimation();
 		this.frameHandler.TogglePlayingAnimation();
-		console.log(this.animationData);
+
+		this.canvasHandler.ResizeCanvas();
+
 		//set framedata initialized to true
 	};
 

dist/assets/stylesheets/main.css

@@ -38,21 +38,7 @@ body {
 	height: 100%;
 }
 
-#imageCanvas {
+#canvasImage {
 	border: 2px solid #6b7578;
-	width: 256;
-	height: 256;
-	-ms-interpolation-mode: nearest-neighbor;
 	image-rendering: pixelated;
 }
-
-#currentImage {
-	border: 2px solid #6b7578;
-	object-position: center top;
-	width: 256;
-	height: 256;
-	min-width: 256;
-	min-height: 256;
-	-ms-interpolation-mode: nearest-neighbor;
-	image-rendering: crisp-edges;
-}

dist/index.html

@@ -18,10 +18,9 @@
               <p></p>
           </div>
           <!-- canvas -->
-          <div id="currentImage">
+          <div id="canvasStyle">
-            <canvas id="canvasImage" alt="No images uploaded"></canvas>
+            <canvas id="canvasImage" alt=""></canvas>
           </div>
-
           <div id="settings">
               Name: <input type = "text" id="filename"><br>
               <div id = "originInfo">Click image to set Origin</div>