Skip to content

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.

Notifications You must be signed in to change notification settings

pallavisingh1511/Simple-Paint-App

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

Watchers

Forks

Releases

No releases published

Packages

No packages published