canvas drawing for web

src/screens/Onboarding/StepProfile/SelectImageButton.web.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Pressable, StyleSheet, Text} from 'react-native'
+import {Pressable, StyleSheet} from 'react-native'
 import {Camera_Stroke2_Corner0_Rounded as Camera} from '#/components/icons/Camera'
 import {useAvatar, useSetAvatar} from '#/screens/Onboarding/StepProfile/index'
 import {useTheme} from '#/alf'
@@ -57,20 +57,24 @@ export function SelectImageButton() {
 function Canvas() {
   const avatar = useAvatar()
   const canvasRef = React.useRef<HTMLCanvasElement>(null)
-  React.useEffect(() => {}, [])
 
-  return (
-    <canvas
-      ref={canvasRef}
-      height={1000}
-      width={1000}
-      style={{
-        backgroundColor: avatar.backgroundColor,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    />
-  )
+  React.useEffect(() => {
+    // @ts-ignore web only
+    const path = new Path2D(avatar.placeholder.path)
+    // @ts-ignore web only
+    const ctx = canvasRef.current?.getContext('2d')
+    ctx?.reset()
+    ctx.fillStyle = avatar.backgroundColor
+    ctx?.moveTo(0, 0)
+    ctx?.fillRect(0, 0, 24 * 10, 24 * 10)
+    ctx.fillStyle = '#fff'
+    ctx.lineWidth = 0.1
+    ctx?.translate(24 * 1.5, 24 * 1.5)
+    ctx?.scale(7, 7)
+    ctx?.fill(path)
+  }, [avatar.backgroundColor, avatar.placeholder.path])
+
+  return <canvas ref={canvasRef} height={24 * 10} width={24 * 10} />
 }
 
 const styles = StyleSheet.create({

src/screens/Onboarding/StepProfile/types.ts

@@ -4,15 +4,38 @@ import {
   EmojiAlt_Stroke2_Corner0_Rounded as EmojiAlt,
   EmojiArc_Stroke2_Corner0_Rounded as EmojiArc,
   EmojiHeartEyes_Stroke2_Corner0_Rounded as EmojiHeartEyes,
+  emojiSmilePath,
+  emojiSadPath,
+  emojiAltPath,
+  emojiArcPath,
+  emojiHeartEyesPath,
 } from '#/components/icons/Emoji'
-import {Alien_Stroke2_Corner0_Rounded as Alien} from '#/components/icons/Alien'
-import {Bubbles_Stroke2_Corner0_Rounded as Bubbles} from '#/components/icons/Bubbles'
-import {Explosion_Stroke2_Corner0_Rounded as Explosion} from '#/components/icons/Explosion'
-import {Lab_Stroke2_Corner0_Rounded as Lab} from '#/components/icons/Lab'
-import {PiggyBank_Stroke2_Corner0_Rounded as PiggyBank} from '#/components/icons/PiggyBank'
-import {Poop_Stroke2_Corner0_Rounded as Poop} from '#/components/icons/Poop'
+import {
+  Alien_Stroke2_Corner0_Rounded as Alien,
+  path as alienPath,
+} from '#/components/icons/Alien'
+import {
+  Bubbles_Stroke2_Corner0_Rounded as Bubbles,
+  path as bubblesPath,
+} from '#/components/icons/Bubbles'
+import {
+  Explosion_Stroke2_Corner0_Rounded as Explosion,
+  path as explosionPath,
+} from '#/components/icons/Explosion'
+import {
+  Lab_Stroke2_Corner0_Rounded as Lab,
+  path as labPath,
+} from '#/components/icons/Lab'
+import {
+  PiggyBank_Stroke2_Corner0_Rounded as PiggyBank,
+  path as piggyBankPath,
+} from '#/components/icons/PiggyBank'
+import {
+  Poop_Stroke2_Corner0_Rounded as Poop,
+  path as poopPath,
+} from '#/components/icons/Poop'
 
-export const emojis = [
+export const emojiNames = [
   'camera',
   'smile',
   'sad',
@@ -26,17 +49,68 @@ export const emojis = [
   'piggyBank',
   'poop',
 ] as const
-export type Emoji = (typeof emojis)[number]
-export const emojiItems: Record<Emoji, typeof EmojiSmile> = {
-  smile: EmojiSmile,
-  sad: EmojiSad,
-  alt: EmojiAlt,
-  arc: EmojiArc,
-  heartEyes: EmojiHeartEyes,
-  alien: Alien,
-  bubbles: Bubbles,
-  explosion: Explosion,
-  lab: Lab,
-  piggyBank: PiggyBank,
-  poop: Poop,
+export type EmojiName = (typeof emojiNames)[number]
+
+export interface Emoji {
+  name: EmojiName
+  component: typeof EmojiSmile
+  path: string
+}
+export const emojiItems: Record<EmojiName, Emoji> = {
+  camera: {},
+  smile: {
+    name: 'smile',
+    component: EmojiSmile,
+    path: emojiSmilePath,
+  },
+  sad: {
+    name: 'sad',
+    component: EmojiSad,
+    path: emojiSadPath,
+  },
+  alt: {
+    name: 'alt',
+    component: EmojiAlt,
+    path: emojiAltPath,
+  },
+  arc: {
+    name: 'arc',
+    component: EmojiArc,
+    path: emojiArcPath,
+  },
+  heartEyes: {
+    name: 'heartEyes',
+    component: EmojiHeartEyes,
+    path: emojiHeartEyesPath,
+  },
+  alien: {
+    name: 'alien',
+    component: Alien,
+    path: alienPath,
+  },
+  bubbles: {
+    name: 'bubbles',
+    component: Bubbles,
+    path: bubblesPath,
+  },
+  explosion: {
+    name: 'explosion',
+    component: Explosion,
+    path: explosionPath,
+  },
+  lab: {
+    name: 'lab',
+    component: Lab,
+    path: labPath,
+  },
+  piggyBank: {
+    name: 'piggyBank',
+    component: PiggyBank,
+    path: piggyBankPath,
+  },
+  poop: {
+    name: 'poop',
+    component: Poop,
+    path: poopPath,
+  },
 }