Skip to content

About

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

Resources

Stars

0 stars

Watchers

0 watching

Forks

 
 

Latest commit

 

History

17 Commits

Folders and files

Repository files navigation

	Paint Application for Circle
	Pallavi Singh

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

1.	It lets the user draw circles on the canvas by dragging mouse.
2.	IT automatically fills a different color to every different circle.
3.	A button has been added that clears the canvas.
4.	Another feature added where user can drag circles using mouse.
5.	On double click of a circle 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 circles. (Click on Draw/ Move circle button to switch between the modes)
2.	Move	Manually : Click and drag the circle you want to move. (Click on Draw/ Move circle button to switch between the modes)
3.	Delete : Double click on the circle you want to delete.
4.	Clear : Clicking on the clear button deletes all the drawn circles and clears the canvas.
5.	Move Randomly : On click of the last button, the drawn circles 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.	eraseButton.jpg
7.	moveRandom.jpg

About

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

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages