Drawing Demo Description

This page demonstrates the free drawing mode in CanvasX using the PencilBrush from Fabric.js. You can draw directly on the canvas with a custom pen cursor. A sample note is also added for reference.

Drawing Mode Documentation

Overview

CanvasX supports free drawing using Fabric.js brushes. The PencilBrush allows users to draw smooth, hand-drawn lines on the canvas. You can customize the brush width, color, and cursor.

Key Properties

• isDrawingMode: boolean — Enables or disables drawing mode on the canvas.
• freeDrawingBrush: Brush — The brush used for drawing (e.g., PencilBrush, CircleBrush).
• freeDrawingBrush.width: number — The width of the drawing brush.
• freeDrawingBrush.color: string — The color of the drawing brush.

Usage Example

canvas.freeDrawingBrush = new PencilBrush(canvas);
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 3;
canvas.freeDrawingBrush.color = 'purple';

Tips & Best Practices

• Use a custom cursor for better drawing experience.
• Combine drawing with shapes and notes for richer diagrams.
• Disable drawing mode when not needed to allow object selection.