From d63e6c87c46b5308f1353452cb68afe4df661ef5 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 10 Mar 2024 23:25:07 +0800
Subject: [PATCH] Potential perf improvements for canvas

---
 src/components/account-info.jsx | 5 ++++-
 src/components/avatar.jsx       | 1 +
 src/components/status.jsx       | 5 ++++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index 37e5f59..bc72890 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -453,12 +453,15 @@ function AccountInfo({
                   e.target.classList.add('loaded');
                   try {
                     // Get color from four corners of image
-                    const canvas = document.createElement('canvas');
+                    const canvas = window.OffscreenCanvas
+                      ? new OffscreenCanvas(1, 1)
+                      : document.createElement('canvas');
                     const ctx = canvas.getContext('2d', {
                       willReadFrequently: true,
                     });
                     canvas.width = e.target.width;
                     canvas.height = e.target.height;
+                    ctx.imageSmoothingEnabled = false;
                     ctx.drawImage(e.target, 0, 0);
                     // const colors = [
                     //   ctx.getImageData(0, 0, 1, 1).data,
diff --git a/src/components/avatar.jsx b/src/components/avatar.jsx
index 0edc9d3..f0afddf 100644
--- a/src/components/avatar.jsx
+++ b/src/components/avatar.jsx
@@ -21,6 +21,7 @@ const canvas = window.OffscreenCanvas
 const ctx = canvas.getContext('2d', {
   willReadFrequently: true,
 });
+ctx.imageSmoothingEnabled = false;
 
 function Avatar({ url, size, alt = '', squircle, ...props }) {
   size = SIZES[size] || size || SIZES.m;
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 441a034..7ae36a3 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -2167,10 +2167,13 @@ function Card({ card, selfReferential, instance }) {
       const w = 44;
       const h = 44;
       const blurhashPixels = decodeBlurHash(blurhash, w, h);
-      const canvas = document.createElement('canvas');
+      const canvas = window.OffscreenCanvas
+        ? new OffscreenCanvas(1, 1)
+        : document.createElement('canvas');
       canvas.width = w;
       canvas.height = h;
       const ctx = canvas.getContext('2d');
+      ctx.imageSmoothingEnabled = false;
       const imageData = ctx.createImageData(w, h);
       imageData.data.set(blurhashPixels);
       ctx.putImageData(imageData, 0, 0);