Dotting

Overview

The Dotting component is an innovative tool designed for creating interactive canvases, perfect for artists and developers alike. This component offers incredible flexibility, allowing users to customize their artistic experience with various props. Whether you’re building a drawing application or enhancing a creative project, the Dotting component provides an intuitive and powerful way to engage with digital art.

With an easy installation process and straightforward setup, users can quickly integrate this component into their projects. The ability to customize aspects such as size, background color, and visibility of the grid makes this component a valuable addition for anyone looking to enhance their creative workflow.

Features

• Customizable Canvas Size: Easily set the canvas dimensions with the width and height props, which accept both string and number values for flexibility.
• Grid Options: Control the visibility and appearance of the grid with gridStrokeColor and gridStrokeWidth, allowing users to tailor their workspace to their preferences.
• Background Color: The backgroundColor prop enables users to personalize the canvas background, enhancing the overall artistic experience.
• Layer Management: Use the initLayers prop to define initial drawing layers, providing the option to start with a default layer or customize as needed.
• Pan and Zoom Features: If desired, the canvas can be made pan and zoomable by setting isPanZoomable to true, adding more functionality for detailed work.
• Style Customization: The style prop facilitates the addition of custom styles to the canvas, ensuring it fits seamlessly into your overall project design.
• Ref Hook Integration: For advanced customization, utilize the ref prop with a refObject created using useRef<DottingRef>, allowing for further manipulations of the component.
• Dynamic Grid Visibility: Control the grid’s visibility with the isGridVisible prop, giving users the choice to work with or without grid aids.