ISCG4500 – Introduction to Information Technology Assignment 1: HTML 5 Canvas, JavaScript and Theory Questions Total marks: 100 Course Weighting: 30% Due Date: 23:55, Monday, 17th October 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. Figure 1: HTML 5 Canvas Vector GraphicNote: 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: var side = 300; // define size of square var xpos = centerx – side /2; // def xpos for square var ypos = centery – side /2; // def ypos for square ctx.fillStyle = "#FF0000"; ctx.fillRect(xpos, ypos , side,side); // create the square Figure 2: Positional Variables and Sample Code 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. [3 marks] 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 marks] 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 marks] 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 [4 marks] 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! [6 marks]Part B: Challenge Questions 10% 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. [5 marks] 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. [5 marks] 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) Assignment hand-in Assignments submitted after the due date and time without having received an extension through Special Assessment Circumstances (SAC) will be penalised according to the following:  10% of marks deducted if submitted within 24hrs of the deadline  20% of marks deducted if submitted after 24hrs and up to 48hrs of the deadline  30% of marks deducted if submitted after 48hrs and up to 72hrs of the deadline  No grade will be awarded for an assignment that is submitted later than 72hrs after the deadline.  Students submitting assignments after the due date and time will be ineligible to resubmit a failed assignment. Special Assessment Circumstances A student, who due to circumstances beyond his or her control, misses a test, final examination or an assignment deadline or considers his or her performance in a test, final examination or an assignment to have been adversely affected, should complete the Special Assessment Circumstances (SAC) form available from Student Central. Within any semester, a student may have only one SAC per course. When requesting an SAC for an assignment, the SAC form must be submitted (along with work completed to date) within the time frame of the extension requested; i.e. if the Doctor's certificate is for one (1) day, then the SAC form and work completed must be submitted within one (1) day.Unacceptable Assistance  Working together on one copy of the assessment and submitting it as own work.  Giving another student your work.  Copying someone else's work. This includes work done by someone not on the course.  Copying from books, Internet etc. and submitting it as own work. Anything taken directly from another source must be acknowledged correctly: show the source alongside the quotation.  Changing or correcting another student's work. Have a query? Want to improve your work? You could:  Talk it over with your lecturer or programme director.  Visit Te Puno Ako or Maia for learning advice and support.  Visit the Centre for Pacific Development and Support.  Contact USU Advocate for independent advice.  For contact details and more information, go to www.usu.co.nz (http://www.usu.co.nz)This is an individual assignment. You must work on the individual tasks by yourself and all work on these tasks must be your own. Please sign the statement below to declare that this assignment submission is your own work and hand in the signed statement with your assignment. Failure to sign and include this statement may mean your assignment is not marked. Introduction to Information Technology ISCG4500 Assignment 1 I declare that the individual part of this assignment submission is my own work. Where I have incorporated work by other people, I have correctly acknowledged the source in my assignment. Student Name …………………………………….. Student ID …………………..… Date: ……….….…….