https://github.com/anmol-srv/simple-paint-app---circle

https://github.com/anmol-srv/simple-paint-app---circle

Last synced: 1 day ago
JSON representation

• Host: GitHub
• URL: https://github.com/anmol-srv/simple-paint-app---circle
• Owner: Anmol-Srv
• Created: 2024-04-05T08:19:53.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-04-05T08:22:37.000Z (8 months ago)
• Last Synced: 2024-04-28T04:17:42.950Z (7 months ago)
• Language: JavaScript
• Size: 4.88 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Simple-Paint-App---Circle

Circle SketchPad is a minimalistic web-based painting application that allows users to create colorful circles on a digital canvas. Designed with simplicity in mind, it offers an intuitive interface for users of all ages to enjoy digital drawing with just a few clicks.

## Features

- **Draw Circles**: Click and drag your mouse across the canvas to create circles.

- **Dynamic Circle Sizes**: The size of the circle adjusts based on the distance you drag the mouse.

- **Colorful Creations**: Each circle is automatically filled with a random, vibrant color.

- **'Hit' and 'Miss' Feedback**: Receive immediate feedback on whether your click landed on an existing circle ('Hit') or on an empty spot ('Miss').

- **Reset Canvas**: Easily clear your canvas and start anew with the click of a button.

- **Delete Circles**: Double-click on a circle to delete it from the canvas.

## Getting Started

### Prerequisites

To run Circle SketchPad, you will need a modern web browser that supports HTML5, such as Google Chrome, Mozilla Firefox, or Safari.

### Running the Application

1. Clone the repository or download the source code to your local machine.

2. Open the `index.html` file in your web browser.

3. Start drawing by clicking and dragging your mouse on the canvas.

## Usage

- **Creating Circles**: Click and drag anywhere on the canvas to begin drawing a circle. The size of the circle will be determined by how far you drag the mouse.

- **Resetting the Canvas**: Click the "Reset Canvas" button below the canvas to clear all drawings and start over.

- **Deleting a Circle**: Double-click on any circle to remove it from the canvas.

- **Feedback**: Single-click on the canvas to receive a 'Hit' (if clicking on a circle) or 'Miss' (if clicking on an empty area) feedback message displayed directly on the canvas.