From 2dcc33f2109a508887e1ae383d332b1a3c01b6fa Mon Sep 17 00:00:00 2001
From: Matt Walsh <github@netbymatt.com>
Date: Fri, 23 May 2025 23:13:50 -0500
Subject: [PATCH] change to offscreen canvas

---
 server/scripts/modules/radar.mjs          | 39 +++++++++++++++--------
 server/scripts/modules/weatherdisplay.mjs |  2 ++
 views/partials/radar.ejs                  |  2 +-
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/server/scripts/modules/radar.mjs b/server/scripts/modules/radar.mjs
index dda0e53..665915d 100644
--- a/server/scripts/modules/radar.mjs
+++ b/server/scripts/modules/radar.mjs
@@ -119,18 +119,14 @@ class Radar extends WeatherDisplay {
 		const radarSourceY = radarSourceXY.y / 2;
 
 		// Load the most recent doppler radar images.
-		const radarInfo = await Promise.all(urls.map(async (url) => {
+		const radarInfo = await Promise.all(urls.map(async (url, index) => {
 			// create destination context
-			const canvas = document.createElement('canvas');
-			canvas.width = 640;
-			canvas.height = 367;
+			const canvas = new OffscreenCanvas(640, 367);
 			const context = canvas.getContext('2d');
 			context.imageSmoothingEnabled = false;
 
 			// create working context for manipulation
-			const workingCanvas = document.createElement('canvas');
-			workingCanvas.width = width;
-			workingCanvas.height = height;
+			const workingCanvas = new OffscreenCanvas(width, height);
 			const workingContext = workingCanvas.getContext('2d');
 			workingContext.imageSmoothingEnabled = false;
 
@@ -161,32 +157,47 @@ class Radar extends WeatherDisplay {
 			} else {
 				time = DateTime.fromHTTP(response.headers.get('last-modified')).setZone(timeZone());
 			}
-
+			console.time(`Radar-${index}`);
 			// assign to an html image element
+			console.time(`Radar-${index}-loadimg`);
 			const imgBlob = await loadImg(blob);
-
+			console.timeEnd(`Radar-${index}-loadimg`);
 			// draw the entire image
 			workingContext.clearRect(0, 0, width, 1600);
+			console.time(`Radar-${index}-drawimage`);
 			workingContext.drawImage(imgBlob, 0, 0, width, 1600);
-
+			console.timeEnd(`Radar-${index}-drawimage`);
 			// get the base map
+			console.time(`Radar-${index}-drawbasemap`);
 			context.drawImage(this.baseMap, sourceXY.x, sourceXY.y, offsetX * 2, offsetY * 2, 0, 0, 640, 367);
-
+			console.timeEnd(`Radar-${index}-drawbasemap`);
 			// crop the radar image
 			const cropCanvas = document.createElement('canvas');
 			cropCanvas.width = 640;
 			cropCanvas.height = 367;
 			const cropContext = cropCanvas.getContext('2d', { willReadFrequently: true });
 			cropContext.imageSmoothingEnabled = false;
+			console.time(`Radar-${index}-copy-radar`);
 			cropContext.drawImage(workingCanvas, radarSourceX, radarSourceY, (radarOffsetX * 2), (radarOffsetY * 2.33), 0, 0, 640, 367);
-			// clean the image
+			console.timeEnd(`Radar-${index}-copy-radar`);
+			// clean the im`age
+			console.time(`Radar-${index}-clean-image`);
 			utils.removeDopplerRadarImageNoise(cropContext);
+			console.timeEnd(`Radar-${index}-clean-image`);
 
 			// merge the radar and map
+			console.time(`Radar-${index}-merge`);
 			utils.mergeDopplerRadarImage(context, cropContext);
+			console.timeEnd(`Radar-${index}-merge`);
 
-			const elem = this.fillTemplate('frame', { map: { type: 'img', src: canvas.toDataURL() } });
-
+			console.time(`Radar-${index}-dataurl`);
+			const onscreenCanvas = document.createElement('canvas');
+			onscreenCanvas.width = canvas.width;
+			onscreenCanvas.height = canvas.height;
+			onscreenCanvas.getContext('bitmaprenderer').transferFromImageBitmap(canvas.transferToImageBitmap());
+			const elem = this.fillTemplate('frame', { map: { type: 'canvas', canvas: onscreenCanvas } });
+			console.timeEnd(`Radar-${index}-dataurl`);
+			console.timeEnd(`Radar-${index}`);
 			return {
 				canvas,
 				time,
diff --git a/server/scripts/modules/weatherdisplay.mjs b/server/scripts/modules/weatherdisplay.mjs
index d9e3a07..34a5b75 100644
--- a/server/scripts/modules/weatherdisplay.mjs
+++ b/server/scripts/modules/weatherdisplay.mjs
@@ -421,6 +421,8 @@ class WeatherDisplay {
 			} else if (value?.type === 'img') {
 				// fill the image source
 				elem.querySelector('img').src = value.src;
+			} else if (value?.type === 'canvas') {
+				elem.append(value.canvas);
 			}
 		});
 
diff --git a/views/partials/radar.ejs b/views/partials/radar.ejs
index 5952f81..7b2c42d 100644
--- a/views/partials/radar.ejs
+++ b/views/partials/radar.ejs
@@ -35,7 +35,7 @@
 		<div class="scroll-area">
 			<div class="frame template">
 				<div class="map">
-					<img src="images/maps/radar.webp" />
+					<!-- <img src="images/maps/radar.webp" /> -->
 				</div>
 			</div>
 		</div>