Skip to content

About It is a simple Paint app created using HTML5 canvas element, CSS and javascript, wherein one can draw rectangles on the canvas, move them, delete them by double-clicking on them and clear the canvas. Drawing of rectangle can be done by clicking and dragging the mouse, and every rectangle drawn will have a distinct color.

Notifications You must be signed in to change notification settings

yogigupta1206/Simple-Paint-App

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

	Paint Application for Rectangle
	Yogesh Gupta

Following tasks has been carried in this application using HTML5 Canvas Element

1.	It lets the user draw rectangles on the canvas by dragging mouse.
2.	IT automatically fills a different color to every different rectangle.
3.	A button has been added that clears the canvas.
4.	Another feature added where user can drag rectangles using mouse.
5.	On double click of a rectangle deletes it.

It has been tested on the following browsers:
		Google Chrome
		Mozilla Firefox
		IE
		Safari

Additionally, the size of the canvas has not been kept fixed, and it varies with the resizing of the browser window.

1.	Draw : Drag mouse anywhere on the canvas to draw rectangles. (Click on Draw/ Move rectangle button to switch between the modes)
2.	Move	Manually : Click and drag the rectangle you want to move. (Click on Draw/ Move rectangle button to switch between the modes)
3.	Delete : Double click on the rectangle you want to delete.
4.	Clear : Clicking on the clear button deletes all the drawn rectangles and clears the canvas.
5.	Move Randomly : On click of the last button, the drawn rectangles start moving randomly.
					It is a toggle button. Clicking it again will stop the movement.

Application files attached:
1.	index.html
2.	index.css
3.	index.js
4.	drawButton.jpg
5.	moveButton.jpg	
6.	clearButton.jpg
7.	moveRandom.jpg

About

About It is a simple Paint app created using HTML5 canvas element, CSS and javascript, wherein one can draw rectangles on the canvas, move them, delete them by double-clicking on them and clear the canvas. Drawing of rectangle can be done by clicking and dragging the mouse, and every rectangle drawn will have a distinct color.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published