Skip to content

Drawing‑JS is an advanced HTML5 Canvas drawing app built with JavaScript and Bootstrap. It offers freehand drawing, eraser, shape tools (rectangle, circle, line) and text input with adjustable size, opacity, shadow, and gradient effects. Features include undo/redo, local auto‑save, and export as PNG/JPEG.

License

Notifications You must be signed in to change notification settings

Seday2003/Drawing-JS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🎨 Drawing-JS: Your Canvas Awaits

Drawing App

Welcome to Drawing-JS, an advanced HTML5 Canvas drawing application built with JavaScript and Bootstrap. This app provides a user-friendly platform for artists and hobbyists alike to unleash their creativity. You can access the latest release here.

🌟 Features

  • Freehand Drawing: Use your mouse or touchscreen to create freehand sketches.
  • Eraser Tool: Easily remove any mistakes with the eraser.
  • Shape Tools: Draw basic shapes like rectangles, circles, and lines.
  • Text Input: Add text to your drawings with adjustable size, opacity, shadow, and gradient effects.
  • Undo/Redo: Never worry about making mistakes; easily revert or reapply changes.
  • Local Auto-Save: Your work is saved automatically, ensuring you don’t lose progress.
  • Export Options: Save your artwork as PNG or JPEG files.

🚀 Getting Started

To get started with Drawing-JS, follow these steps:

Prerequisites

  • A modern web browser (Chrome, Firefox, Safari, etc.)
  • Basic understanding of HTML and JavaScript (optional but helpful)

Installation

  1. Clone the Repository:

    git clone https://github.com/Seday2003/Drawing-JS.git
  2. Open the Project: Navigate to the project directory and open index.html in your web browser.

Usage

Once you have the app open, you will see a clean interface. Here’s how to use the features:

  • Freehand Drawing: Click and drag your mouse to draw.
  • Shape Tools: Select a shape from the toolbar and click on the canvas to draw.
  • Text Input: Click the text tool, then click on the canvas to type.
  • Eraser: Select the eraser tool to remove parts of your drawing.
  • Undo/Redo: Use the buttons to manage your drawing history.
  • Export: Click the export button to save your work in your preferred format.

🛠️ Technologies Used

  • HTML5: For structuring the web app.
  • CSS: For styling and layout.
  • JavaScript: For functionality and interactivity.
  • Bootstrap: For responsive design.

📚 Documentation

Drawing Tools

Freehand Drawing

The freehand drawing tool allows you to draw freely on the canvas. You can adjust the brush size and color from the toolbar.

Shape Tools

Drawing shapes is straightforward. Select a shape, then click and drag on the canvas to create it. You can also change the fill and stroke color.

Text Input

You can add text to your drawings. Click on the text tool, type your text, and adjust its properties like size and opacity.

Exporting Your Work

To save your artwork, click the export button. You can choose to save it as either a PNG or JPEG file. This feature allows you to share your creations easily.

🖼️ Screenshots

Canvas Interface

Drawing Tools

🏷️ Topics

This project covers various topics, including:

  • Bootstrap: For responsive design.
  • Canvas: The main feature of the app.
  • Drawing: The core functionality.
  • Web App: A user-friendly interface for users.

📦 Releases

To download the latest version of Drawing-JS, visit the Releases section. You can find the necessary files to run the app there.

🤝 Contributing

We welcome contributions to improve Drawing-JS. If you want to help, please follow these steps:

  1. Fork the repository.
  2. Create a new branch.
  3. Make your changes.
  4. Submit a pull request.

📝 License

This project is licensed under the MIT License. Feel free to use and modify the code as you wish.

📞 Contact

For any inquiries, please reach out to the project maintainer:

📈 Roadmap

  • Future Features:
    • Implement layers for more complex drawings.
    • Add more shape options and customization features.
    • Improve performance for larger canvases.

🔗 Links

Explore Drawing-JS and let your creativity flow! You can download the latest version here. Enjoy drawing!

About

Drawing‑JS is an advanced HTML5 Canvas drawing app built with JavaScript and Bootstrap. It offers freehand drawing, eraser, shape tools (rectangle, circle, line) and text input with adjustable size, opacity, shadow, and gradient effects. Features include undo/redo, local auto‑save, and export as PNG/JPEG.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •