Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/albertarakelyan/color-dropper-canvas
A photo editor based on web technologies.
https://github.com/albertarakelyan/color-dropper-canvas
canvas css html photo-editor typescript
Last synced: 26 days ago
JSON representation
A photo editor based on web technologies.
- Host: GitHub
- URL: https://github.com/albertarakelyan/color-dropper-canvas
- Owner: AlbertArakelyan
- Created: 2024-01-27T18:18:23.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-02-07T02:23:34.000Z (9 months ago)
- Last Synced: 2024-02-07T03:29:45.311Z (9 months ago)
- Topics: canvas, css, html, photo-editor, typescript
- Language: TypeScript
- Homepage: https://color-dropper-canvas.vercel.app
- Size: 482 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Color Dropper
A photo editor based on web technologies.
The website is deployed on [Vercel](https://vercel.com/)
Website: [https://color-dropper-canvas.vercel.app/](https://color-dropper-canvas.vercel.app/)
## 🔍Table of Contents
- [🛠 Product Features](#-product-features)
- [📦 Installation](#-installation)
- [💻 Tech Stack](#-tech-stack)
- [📚 Used Resources](#-used-resources)
## 🛠 Product Features
- give users the ability to use the color dropper
- color dropper must show hex code in circle while hovering over an area
- on hover over a color circle changes to that color
While hovering on a color the circle changes to it.
Clicking on the dropper icon will make the
cursor to be the dropper. The dropper is showing the color hex. On click the color dropper will
show the picked hex in the header.
## 📦 Installation
1. Clone the repository.
```bash
git clone https://github.com/AlbertArakelyan/color-dropper-canvas.git
```
2. Install the dependencies.
```bash
npm install
```
_*Note: Ensure you are using Node.js `v20.11.0`_
3. Run the project.
```bash
npm run dev
```
## 💻 Tech Stack
**Vite** has been used to build the project with **Typescript** faster.
Read more about **Vite** at their [official website](https://vitejs.dev/).
## 📚 Used Resources
- [Canvas Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
- [Pixel Manipulation with Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas)