Canvas
Iscanvasempty

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)
}