Easydraw-package NPM

EasyDrawPackage

A lightweight, easy-to-use drawing library that provides a canvas-based drawing interface with tools like pen, eraser, and color selection.

Features

🖌️ Freehand drawing
✏️ Adjustable brush size
🎨 Color picker
⚪ Eraser tool
🖼️ Custom background support
📱 Touch device support
↩️ Path-based drawing system

Installation

Option 1: NPM (Recommended)

npm install easydraw-package

Option 2: Browser Direct

Download the file:

# Create a directory for the library
mkdir easydraw
cd easydraw

# Download the browser version
curl -o easydraw.browser.js https://unpkg.com/easydraw-package/dist/easydraw.browser.js

Or use CDN:

<!-- Latest version -->
<script src="https://unpkg.com/easydraw-package/dist/easydraw.browser.js"></script>

<!-- Specific version -->
<script src="https://unpkg.com/easydraw-package@1.0.0/dist/easydraw.browser.js"></script>

Usage

As NPM Module

// ES6 import
import { displayCanvas } from 'easydraw-package';
// or
import EasyDraw from 'easydraw-package';

// CommonJS
const { displayCanvas } = require('easydraw-package');
// or
const EasyDraw = require('easydraw-package');

// Initialize
displayCanvas("#drawingArea");

Browser Usage

<!DOCTYPE html>
<html>
<head>
    <title>Drawing Board Example</title>
</head>
<body>
    <div id="drawingArea" style="width: 800px; height: 600px;"></div>
    
    <!-- Choose ONE of these methods: -->
    
    <!-- 1. Via CDN -->
    <script src="https://unpkg.com/easydraw-package/dist/easydraw.browser.js"></script>
    
    <!-- 2. Local file after npm install -->
    <script src="node_modules/easydraw-package/dist/easydraw.browser.js"></script>
    
    <!-- 3. Downloaded file -->
    <script src="path/to/easydraw.browser.js"></script>

    <script>
        displayCanvas("#drawingArea");
    </script>
</body>
</html>

With Custom Background

// Add a background image
displayCanvas("#drawingArea", "path/to/background-image.jpg");

Styling

The drawing board comes with built-in styles, but you can customize the appearance by overriding the CSS classes:

.canvas-container: Container for the canvas
.tools: Toolbar container
.color-picker: Color picker input
.tools button: Tool buttons
.tools button.active: Active tool button state

Contributing

Fork the repository
Create your feature branch
Commit your changes
Push to the branch
Create a new Pull Request

canvas drawing sketch paint

1.0.2

6 months ago

1.0.0

6 months ago