/drawing-app

You want to draw something, open this drawing application and draw your creativity on canvas and save your canvas as image.

Primary LanguageJavaScript

Drawing Application

Introduction

It is a very simple drawing application where a user can draw by selecting any shape from available three shapes, or can draw something freely. And also can save whatever he has drawn on canvas as a image.

Screenshot

drawing-app

Sections

There are two sections of this application user interface.

  • The Left Section.
  • The Right Section.

Tool Board

The left section of this application is a Tool Board. From Tool Board, user can select available different shapes, options and colors.

Shapes

There are three shapes available from which user can select any of them to draw on canvas.

  1. Rectangle
  2. Circle
  3. Triangle

User can choose fill color option if he wants to draw a shape with color filled inside it.

When user select fill color option, and select any shape, that time shape drawn by user will get filled by selected color.

Drawing Options

There are two options available for user.

  1. Brush
  2. Eraser

If user want to draw something freely on canvas, that time user can select brush option.

If user wants to erase something which he has drawn on canvas, that time user can select eraser option.

Colors

There are 4 default colors options. If user want to select any other color from avaialbe colors, that time user can select any color by opening color picker by selecting 5th color option.

Buttons

Clear Canvas

If user wants to clear canvas completely, that time user can click on Clear canvas button.

Save As Image

If user wants to save what he has drawn on canvas as an image, that time user can click on Save As Image button.

Canvas

The right section of this application a canvas on which user can draw any shape or can draw freely.

Tehnologies Used

To build this drawing application i have used these technologies.

  • HTML
  • CSS
  • Javascript
  • Canvas API