Animation in Canvas -- 2 - 11/02/2017 09:15 EST -- 2

Create a unique tilesheet that has atleast 6 frames equally distributed Use Photoshop to built it Frame should contains the following: Normal stage Jumping stage Punching stage Kicking stage Crouching stage Powering up stage with energy bean around it: similar to dragonball z Built a html page with canvas and use jQuery as well as Document load function Using object and create the image object that contains the following: URL Number of frames Current frame X coordinate Y Coordinate Size updateAnimation function Use all the elements that we have discussed, canvas, render, drawingImage and etc I want you to create two program using these requirements First program: when loaded just goes through the frame continuously in a loop, doesn’t stop with 300 milliseconds interval Second program once loads, will wait for user keypress event “N” Key for Normal “J” key for Jumping “P” key for Punching “K” key for kicking “C” key for crouching “E” key for powering up For the second program, I want you to store the keys and coordinate in a 2D array and in your keydown loop through and find the coordinate and pass them to drawImage Lastly, for the second program, you will need keyup (release) as well when the key is released, the image goes back to Normal stage