Drawing Cursor

A drawing cursor component that renders a canvas for interactive drawing. It tracks pointer movements and draws strokes with customizable properties. Use it to create interactive drawing experiences on a canvas.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/drawing-cursor

npx layro-cli add @educlopez/drawing-cursor

npx layro-cli add @educlopez/drawing-cursor

bunx layro-cli add @educlopez/drawing-cursor

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { useReducedMotion } from "motion/react";
import type { ReactNode, Ref } from "react";
import { useEffect, useImperativeHandle, useRef, useState } from "react";

export type DrawingCursorHandle = {
  clear: () => void;
  toDataURL: (type?: string, quality?: number) => string;
};

export type DrawingCursorProps = {
  blend?: GlobalCompositeOperation;