For this project our group worked together to ensure we all shared similar aims in how we wanted our canvas to perfrom and look. The UI was probably the most difficult thing to decide as there are so many styles you could do it.
We worked together to decide which buttons that we wanted to implement into our page, then we split up the work and started to develop the buttons below.
- Save Button
Once clicked it will save your drawn canvas image to your computer. this image has no background.
- Clear Button
When this button is clicked it will clear the canvas of all user input.
- Rubber
This button allows the user to erase their mistakes from the canvas, brush size is changeable.
- Free Drawing
This button allows the user to draw a line on the canvas, this line is ended when the user stops dragging and stops clicking. The line width and color is changable.
- Dotted Line
This button allows the user to input a straight dotted line onto the canvas, the first click initiates the line, onclick drag defines the length of the line and the line is drawn once the user stops dragging and clicking. This line can change color and line thickness.
- Straight Line
This button allows the user to input a straight line onto the canvas, the first click initiates the line, onclick drag defines the length of the line and the line is drawn once the user stops dragging and clicking. This line can change color and line thickness.
- Curved Line
This button allows the user to input a curved line, or quadratic curve onto the canvas, the first click initiates the line, onclick drag defines the length of the line and the line is drawn once the user stops dragging and clicking, to apply the curve click and drag once more, when you're statisfied stop dragging and clicking. This line can change color and line thickness.
- Triangle
This button allows the user to draw triangles on the canvas, in order to use this function, first draw the first line with a click and drag motion, then draw the second line in the same manner, when you're finished with the second line stop dragging and clicking. A triangle will appear on the canvas, this shape can change color for the fill as well as line, moreover the width of the line is also changable.
- Rectangle
This button allows users to draw rectangles or squares to the canvas, the first click initiates the start point and while dragging you create the size of the shape. The colors of the shape are changable as is the line width.
- Ellipse
This button allows users to draw ellipses or circles, the first mouse down initiates the center of the shape, then dragging while clicking allows the users to size the shape as well as angle the shape in a desirable manner. The fill color and line color is changable as is the line width.
- Text
This button allows the user to input text onto the canvas, when selected and the user clicks on the canvas a box will appear, the user then should click on the box and input the text, clicking outside of the box will commit the text to the canvas.
- Undo / Redo
-
Clear Button When this button was first introduced to our Canvas app it caused an unexpected issue with the free drawing, if the clear button was used, the free drawing would not show uo on context real until another function was selected and used. This was fixed as we changed the clear function to only clear canvas real.
-
Dotted Line This button added more than one bug into the equation, at first if this was selected then all subsequent functions would have dotted line, this was an easy fix as you just needed to change the ither functiins by adding setDashLine to empty. Another bug was that the if the drawing line function was used before the dotted line function then the style of the dots would have changed as the style was overwritten with a new element. To fix this all the was needed was to set the class and it was fine.
-
Text
Though the text function allows users to comment text to the canvas we were unable to change where the box appears as well as how the text appears.