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