Giter VIP home page Giter VIP logo

hanieh-sadeghi / draw-verse Goto Github PK

View Code? Open in Web Editor NEW
31.0 1.0 1.0 97 KB

In summary, the implemented digital painting is built using HTML, CSS, and JavaScript. In this painting, you will be able to utilize various tools such as a brush, eraser, color picker, and brush width adjustment.

Home Page: https://hanieh-sadeghi.github.io/Draw-Verse/

HTML 31.25% CSS 30.73% JavaScript 38.03%
css html5 javascript

draw-verse's Introduction

Art Canvas

the implemented digital painting is built using HTML, CSS, and JavaScript. In this painting, you will be able to utilize various tools such as a brush, eraser, color picker, and brush width adjustment. Additionally, you can save color settings and also save the image of your artwork. This code draws colored lines on an HTML5 canvas using mouse events and form controls in JavaScript.

Features

  • Eraser : If you want to delete a line or make corrections, the eraser functionality enables you to remove specific parts of the drawing. You can use it to erase lines or areas that need to be modified.

  • Color selection: You can choose your desired color for the drawing tool. This feature allows you to use different colors in your artwork and precisely select the preferred color.

  • Brush width : In this digital painting, you can adjust the width of the brush. This feature enables you to create lines of different thicknesses, adding more variety and detail to your artwork.

  • Save color settings : A feature that allows you to save 5 color histories and use them.

  • Clear the entire canvas:This option allows you to remove all the content on the canvas, including lines, drawings, and colors, effectively resetting the canvas for a fresh start.

Installation

To use this Art Canvas, follow the instructions below:

  1. Clone the repository:

     https://github.com/Hanieh-Sadeghi/Draw-Verse
    
  2. Open the project folder in your preferred code editor.

  3. Launch the application by opening the index.html file in a web browser.

Technologies Used

The following technologies and libraries were used to develop this Art Canvas:

  • HTML: The standard markup language for creating the structure and elements of web pages.
  • CSS: The style sheet language used for designing the visual presentation of web pages.
  • JavaScript: The programming language that enables dynamic behavior and interactivity in web applications.

draw-verse's People

Contributors

hanieh-sadeghi avatar ali-sdg90 avatar

Stargazers

Kang avatar  avatar milad safari avatar Hamid Reza Panahi avatar Yulduck avatar Tahereh Kasehpoor avatar Behzad Seyfi avatar Pouya Babaie avatar Yasha avatar  avatar Mohammad Reza avatar Iman Nemati avatar HediyeSezavaran avatar Soheil Moonesi avatar Sajjad Ranjbar avatar Hello world avatar Ali nazari  avatar MaybeNimaa avatar Ali Dehkhodaei avatar Sajad Ziaee avatar Sina Pirani avatar Amir avatar Ali Emdadi avatar Masoud avatar Mohsen Shabanian avatar Mohammad Hossein Rastegarinia avatar Zahra Bayat avatar Ali Muhammadi avatar Amirhossein Bashiri avatar Mmmad Amin Mahjub Asl avatar Yunes Mohammadi avatar

Watchers

 avatar

Forkers

ali-sdg90

draw-verse's Issues

Color Switch bug

If you have the eraser tool selected; When you switch between colors, the tool will convert to a brush without any change in the ui. ( the selected tool still remains the highlighted brush )

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.