Assignment Brief:
Develop HTML 5 and JavaScript code to create a vector graphic using 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, and semi-circles to create a vector graphic of your design. Check your design with your lecturer drawing it using canvas to ensure you meet the requirements.
Note: that when drawing the vector shapes you should use different coordinatevariables (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:
var side = 200; // define size of square
var xpos = centerx - side /2;// defxpos for square
var ypos = centery - side /2; // def ypos for square
ctx.rect(xpos, ypos , side,side); // create the square path
ctx.strokeStyle="#FF0000"; // set colour to red
ctx.stroke(); // draw the path to the canvas
Part A: HTML 5 Canvas Drawing 20%
1. Create a number of shapes and lines which will form an image. Use variables to keep track of things likes position, size, and how diferent objects are offset (different from each other).
Part B:Challenge Questions 10%
1. Develop a simple canvas animation of your own design. For example, you could rotate the four smaller solid circles around the red hollow 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 thecanvas image using their mouse, buttons and mousedown/ mousemoveevents.