const PATTERN_LIGHT_SVG = ``
const PATTERN_DARK_SVG = ``
export const drawPatternBackground = async (
ctx: CanvasRenderingContext2D,
width: number,
height: number,
bgColor: string,
isDark: boolean
) => {
ctx.fillStyle = bgColor
ctx.fillRect(0, 0, width, height)
const svgString = isDark ? PATTERN_DARK_SVG : PATTERN_LIGHT_SVG
const blob = new Blob([svgString], { type: 'image/svg+xml' })
const url = URL.createObjectURL(blob)
return new Promise((resolve) => {
const img = new window.Image()
img.onload = () => {
const pattern = ctx.createPattern(img, 'repeat')
if (pattern) {
ctx.fillStyle = pattern
ctx.fillRect(0, 0, width, height)
}
URL.revokeObjectURL(url)
resolve()
}
img.onerror = () => {
URL.revokeObjectURL(url)
resolve()
}
img.src = url
})
}