codraw

v1.0.0

Published

6 months ago

Advanced Drawing & Code Generation Library - Draw shapes, symbols, and generate code in multiple programming languages

0High
0Medium
0Low

drawing canvas code-generation shapes symbols javascript python java cpp csharp php go rust html css library art visualization graphics

🎨 Codraw v1.0.0

Advanced Drawing & Code Generation Library

Codraw is a powerful JavaScript library that allows you to draw shapes, symbols, and generate code in multiple programming languages. Perfect for developers, designers, and educators who want to create visual content and convert it to code.

📖 Table of Contents

✨ Features

🎨 Advanced Drawing Capabilities

Multiple Drawing Modes: Shapes, Symbols, Freehand drawing
Rich Shape Library: Triangle, Square, Circle, Line, Polygon
Symbol Support: Stars, Emojis, Custom characters
Real-time Preview: Instant visual feedback
Customizable Styles: Colors, stroke width, opacity

💻 Code Generation

10+ Programming Languages: JavaScript, Python, Java, C++, C#, PHP, Go, Rust, HTML, CSS
Clean Code Output: Well-formatted, commented code
Multiple Export Formats: Source code, images, HTML
Language-specific Optimizations: Tailored for each programming language

⚡ Developer Experience

Simple API: Easy to integrate and use
Touch Support: Mobile and tablet friendly
Keyboard Shortcuts: Ctrl+Z (undo), Ctrl+Y (redo), Ctrl+S (export)
History Management: Undo/Redo functionality
Responsive Design: Works on all screen sizes

🚀 Installation

Method 1: NPM (Recommended)

npm install codraw

Method 2: CDN

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/codraw.css">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/codraw.js"></script>

Method 3: Download

Download the latest release from GitHub and include the files in your project.

🎯 Quick Start

Basic Setup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Codraw App</title>
    <link rel="stylesheet" href="codraw.css">
</head>
<body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
    <script src="codraw.js"></script>
    <script>
        // Initialize Codraw
        const codraw = new Codraw('myCanvas', {
            defaultColor: '#667eea',
            strokeWidth: 3,
            enableAnimations: true
        });
    </script>
</body>
</html>

Advanced Configuration

const codraw = new Codraw('canvasId', {
    defaultColor: '#FFD700',        // Default stroke color
    strokeWidth: 5,                 // Default stroke width
    fillOpacity: 0.3,               // Default fill opacity (0-1)
    enableAnimations: true,         // Enable smooth animations
    enableSnapToGrid: true,         // Enable grid snapping
    gridSize: 20                    // Grid size in pixels
});

📚 API Reference

Constructor

new Codraw(canvasId, options)

Parameters:

canvasId (string): ID of the canvas element
options (object): Configuration options

Methods

Drawing Methods

// Clear the canvas
codraw.clearCanvas()

// Add a shape programmatically
codraw.addShape({
    type: 'circle',
    startX: 100,
    startY: 100,
    endX: 200,
    endY: 200,
    color: '#FF6B6B',
    strokeWidth: 3
})

// Add a symbol
codraw.addSymbol({
    text: '⭐',
    x: 150,
    y: 150,
    color: '#FFD700',
    size: 32
})

// Redraw all elements
codraw.redrawAll()

History Management

// Undo last action
codraw.undo()

// Redo last action
codraw.redo()

Export Methods

// Export canvas as image
codraw.exportAsImage()

// Generate code for selected language
codraw.generateCode()

Shape Types

triangle - Triangle shape
square - Rectangle/square
circle - Circle/ellipse
line - Straight line
polygon - Regular polygon

Supported Languages

| Language | File Extension | Status | |----------|----------------|--------| | JavaScript | .js | ✅ Complete | | Python | .py | ✅ Complete | | Java | .java | ✅ Complete | | C++ | .cpp | ✅ Complete | | C# | .cs | ✅ Complete | | PHP | .php | ✅ Complete | | Go | .go | ✅ Complete | | Rust | .rs | ✅ Complete | | HTML | .html | ✅ Complete | | CSS | .css | ✅ Complete |

💡 Examples

Example 1: Basic Drawing

// Initialize Codraw
const codraw = new Codraw('canvas');

// Draw a circle
codraw.addShape({
    type: 'circle',
    startX: 100,
    startY: 100,
    endX: 200,
    endY: 200,
    color: '#FF6B6B',
    strokeWidth: 3
});

// Draw a triangle
codraw.addShape({
    type: 'triangle',
    startX: 300,
    startY: 100,
    endX: 400,
    endY: 200,
    color: '#4ECDC4',
    strokeWidth: 3
});

// Add a star symbol
codraw.addSymbol({
    text: '⭐',
    x: 250,
    y: 300,
    color: '#FFD700',
    size: 40
});

Example 2: Interactive Drawing

// Set up event listeners
document.getElementById('drawBtn').addEventListener('click', () => {
    codraw.drawingType = 'shapes';
    codraw.currentShape = 'circle';
});

document.getElementById('symbolBtn').addEventListener('click', () => {
    codraw.drawingType = 'symbols';
    codraw.currentSymbol = '⭐';
});

document.getElementById('generateBtn').addEventListener('click', () => {
    codraw.generateCode();
});

Example 3: Custom Styling

// Customize appearance
codraw.options.defaultColor = '#FF6B6B';
codraw.options.strokeWidth = 5;
codraw.options.fillOpacity = 0.5;

// Update canvas
codraw.ctx.strokeStyle = codraw.options.defaultColor;
codraw.ctx.lineWidth = codraw.options.strokeWidth;

🔧 Advanced Features

Custom Shapes

// Create custom shape
codraw.addShape({
    type: 'polygon',
    startX: 100,
    startY: 100,
    endX: 200,
    endY: 200,
    color: '#9B59B6',
    strokeWidth: 4
});

Animation Support

// Enable animations
const codraw = new Codraw('canvas', {
    enableAnimations: true
});

// Animate shapes
function animateShape(shape) {
    let angle = 0;
    const animate = () => {
        angle += 0.1;
        // Update shape position
        shape.x = 200 + Math.cos(angle) * 50;
        shape.y = 200 + Math.sin(angle) * 50;
        codraw.redrawAll();
        requestAnimationFrame(animate);
    };
    animate();
}

Touch Support

// Touch events are automatically handled
// No additional configuration needed
const codraw = new Codraw('canvas');
// Works on mobile devices out of the box

🎯 Use Cases

Educational Tools

Teach programming concepts visually
Create interactive coding tutorials
Generate code examples for students

Prototyping

Quick UI mockups
Visual design iterations
Rapid prototyping tools

Code Generation

Convert visual designs to code
Generate boilerplate code
Create code templates

Art & Design

Digital art creation
Logo design tools
Visual content generation

📱 Browser Support

| Browser | Version | |---------|---------| | Chrome | 60+ | | Firefox | 55+ | | Safari | 12+ | | Edge | 79+ | | Mobile Safari | 12+ | | Chrome Mobile | 60+ |

🐛 Troubleshooting

Common Issues

Canvas Not Found

// Make sure canvas element exists
const canvas = document.getElementById('canvasId');
if (!canvas) {
    console.error('Canvas element not found');
}

Drawing Not Working

// Check if Codraw is properly initialized
if (typeof codraw === 'undefined') {
    console.error('Codraw not initialized');
}

Code Generation Issues

// Ensure shapes/symbols exist before generating code
if (codraw.shapes.length === 0 && codraw.symbols.length === 0) {
    console.warn('No content to generate code from');
}

Browser Compatibility

| Browser | Version | Support | |---------|---------|---------| | Chrome | 60+ | ✅ Full | | Firefox | 55+ | ✅ Full | | Safari | 12+ | ✅ Full | | Edge | 79+ | ✅ Full | | Mobile Safari | 12+ | ✅ Full | | Chrome Mobile | 60+ | ✅ Full |

🔧 Development

Setup

git clone https://github.com/En-Hussain/codraw.git
cd codraw
npm install
npm run dev

Build

npm run build

Test

npm test

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

# Clone repository
git clone https://github.com/En-Hussain/codraw.git
cd codraw

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

# Build for production
npm run build

Code Style

Use ES6+ features
Follow JavaScript Standard Style
Add JSDoc comments for functions
Write tests for new features

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Thanks to all contributors who helped make this project possible
Inspired by the need for better visual-to-code tools
Built with modern web technologies

📞 Support

📧 Email: [email protected]
🐛 Issues: GitHub Issues