diff --git a/src/components/StarterPack/QrCodeDialog.tsx b/src/components/StarterPack/QrCodeDialog.tsx
index 4c40ccb10a..7430ffe77e 100644
--- a/src/components/StarterPack/QrCodeDialog.tsx
+++ b/src/components/StarterPack/QrCodeDialog.tsx
@@ -8,6 +8,7 @@ import {type AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {getCanvas} from '#/lib/canvas'
 import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
 import {atoms as a, useBreakpoints} from '#/alf'
@@ -38,22 +39,6 @@ export function QrCodeDialog({
 
   const ref = useRef<ViewShot>(null)
 
-  const getCanvas = (base64: string): Promise<HTMLCanvasElement> => {
-    return new Promise(resolve => {
-      const image = new Image()
-      image.onload = () => {
-        const canvas = document.createElement('canvas')
-        canvas.width = image.width
-        canvas.height = image.height
-
-        const ctx = canvas.getContext('2d')
-        ctx?.drawImage(image, 0, 0)
-        resolve(canvas)
-      }
-      image.src = base64
-    })
-  }
-
   const onSavePress = async () => {
     ref.current?.capture?.().then(async (uri: string) => {
       if (isNative) {