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