Canvas Helper Function
These Canvas
Helper Functions are used to check
Canvas is Empty or not for Drwing Canvas Features.
Is Canvas Empty
isCanvasEmpty.tsx
export function isCanvasEmpty(canvas: HTMLCanvasElement | null) {
if (!canvas) return true
const blankCanvas = document.createElement('canvas')
blankCanvas.width = canvas.width
blankCanvas.height = canvas.height
return canvas.toDataURL() === blankCanvas.toDataURL()
}
Usage
Canvas.tsx
const [isEmpty, setIsEmpty] = useState<boolean>(false)
const canvasRef = useRef<HTMLCanvasElement | null>(null)
const finishDrawing = () => {
const isEmpty = isCanvasEmpty(canvasRef.current)
setIsEmpty(isEmpty)
}