hourly graph uses image with internal canvas for drawing

server/scripts/modules/hourly-graph.mjs

@@ -42,18 +42,20 @@ class HourlyGraph extends WeatherDisplay {
 	}
 
 	drawCanvas() {
-		if (!this.canvas) this.canvas = this.elem.querySelector('.chart canvas');
+		if (!this.image) this.image = this.elem.querySelector('.chart img');
 
 		// get available space
-		const boundingRect = this.canvas.getBoundingClientRect();
-		const availableWidth = boundingRect.width;
-		const availableHeight = boundingRect.height;
+		const availableWidth = 532;
+		const availableHeight = 285;
 
-		this.canvas.width = availableWidth;
-		this.canvas.height = availableHeight;
+		this.image.width = availableWidth;
+		this.image.height = availableHeight;
 
 		// get context
-		const ctx = this.canvas.getContext('2d');
+		const canvas = document.createElement('canvas');
+		canvas.width = availableWidth;
+		canvas.height = availableHeight;
+		const ctx = canvas.getContext('2d');
 		ctx.imageSmoothingEnabled = false;
 
 		// calculate time scale
@@ -97,6 +99,9 @@ class HourlyGraph extends WeatherDisplay {
 		this.elem.querySelector('.y-axis .l-2').innerHTML = midTemp;
 		this.elem.querySelector('.y-axis .l-3').innerHTML = minTemp;
 
+		// set the image source
+		this.image.src = canvas.toDataURL();
+
 		super.drawCanvas();
 		this.finishDraw();
 	}

server/scripts/modules/radar.mjs

@@ -367,8 +367,6 @@ class Radar extends WeatherDisplay {
 		}
 
 		RadarContext.putImageData(RadarImageData, 0, 0);
-
-		// MapContext.drawImage(RadarContext.canvas, 0, 0);
 	}
 
 	static mergeDopplerRadarImage(mapContext, radarContext) {

server/styles/scss/_hourly-graph.scss

@@ -89,7 +89,7 @@
 			top: 0px;
 			left: 50px;
 
-			canvas {
+			img {
 				width: 532px;
 				height: 285px;
 			}

views/partials/hourly-graph.ejs

@@ -11,7 +11,7 @@
 			<div class="label l-3">55</div>
 		</div>
 		<div class="chart">
-			<canvas id="chart-area"></canvas>
+			<img id="chart-area"></img>
 		</div>
 		<div class="x-axis">
 			<div class="label l-1">12a</div>