Assignment: HTML 5 Canvas, JavaScript and Theory Questions
Assignment Brief:
Develop HTML 5 and JavaScript code to re-create the following vector graphics sequence using appropriate HTML 5 Canvas methods such as:
- beginPath()
- closePath()
- rect()
- arc()
- stroke()
- moveTo()
- lineTo()
- fill()
- ...
Using these methods you will need to draw lines, rectangles, circles (complete arcs) at appropriate co-ordinates using both fillStyle and strokeStyle to reproduce the diagram below.
Note: that when drawing the vector shapes you should use different coordinate variables (var variableName; in JavaScript) to make it easier to keep track of where all the different rectangles, lines and arcs should be placed. For example, it would be wise to keep track of the size of the square with a JavaScript variable such as:
Part A: HTML 5 Canvas Drawing 20%
1. Reproduce the diagram above by defining a canvas object with a width and height of 600 pixels and following the instructions outlined below. In each step be sure to introduce new variables to keep track of things like position, size, and how different objects are offset (differ) from each other.
2. Draw a light green square using code similar to that in Figure 2. The square should have a side length of 300 pixels and should be drawn so that the square is drawn at the center of the canvas as shown in Figure 1.
3. Draw the line objects using the lineTo(), moveTo() and stroke() canvas methods to draw line strokes which create a diamond shape around the canvas. Set the stroke style to black as in Figure 1. The diamond should have four lines on the outside, it should also have lines which converge in the middle (which will later be covered by the center green circle).
4. Fill a complete light green arc (circle) such that the circle is drawn at the center of the canvas with a size less than the width of the rectangle, as shown in Figure 1. Draw a red coloured arc (circle) around the outside of the diamond, as shown in Figure 1. The radius should of the circle should be canvas.width / 2.8
5. Draw filled circles positioned using trigonemtry at diagonal corners of the red circle at the angles of 45°,135°, 225° and 315°. You will be able to calculate the offset (difference) from the center using cos 45° × radius to find the x offset and sin 45° × radius to find the offset for the y position. Remember to use radians!
Part B: Challenge Questions
1. Develop a simple canvas animation of your own design. For example, you could rotate the four circles around the large outside red circle using trigonometry (sin and cos) to locate the x,y coordinates of the circles at different angles. Check that your animation is of an appropriate difficulty level with your lecturer before submitting the assignment.
2. Use Canvas EventListeners to enable user interaction. For example, a user could spin the canvas image using their mouse, buttons and mousedown / mousemove events.
Submission Details and Marking Criteria:
This is an individual assignment. You must work on the individual tasks by yourself and all work on these tasks must be your own. Your final submission should contain the following:
- All the code required to view your animation (your .html file)