1. Reproduce the HTML page that contains a 400 × 400 canvas. 2.Create a function called drawSmile() that draws a smiley

[answerhappygod]

1. Reproduce the HTML page that contains a 400 × 400 canvas. 2.Create a function called drawSmile() that draws a smiley face like the one shown on thescreenshot below. Then call the drawSmile() function so that when the page loads thesmiley is drawn at the center of the canvas.3. Create the functions for the up, down, left, and right buttons. When a direction button ispressed, it should move the smiley a little bit (say 5 or 10 pixels) in the desired direction(left, right, up, down)• This can be accomplished by using two global variables, x and y, to keep track ofthe smiley’s location. When a button is pressed, you can erase the entire canvas,update the correct global variable, and call the function to redraw the smiley in itsnew location• The method ctx.clearRect(x, y, width,

1 Reproduce The Html Page That Contains A 400 400 Canvas 2 Create A Function Called Drawsmile That Draws A Smiley 1 (319.91 KiB) Viewed 23 times

height) can be used to erase the canvas• You must ensure that your object remains on the canvas at all times. Thismeans you must check the x and y coordinates of your drawing to make sure it isnot off of the canvas.4. When the reset button is pressed, the canvas should be cleared, and smiley should bereset back to the center of the canvas.

1 Reproduce The Html Page That Contains A 400 400 Canvas 2 Create A Function Called Drawsmile That Draws A Smiley 2 (91.77 KiB) Viewed 23 times

mayangch別平 CPSC 1045 Assignment 7 Smiley Mover B Creen luncilitallied wind RECTour oil Buiet RETHEY BE CRAF Creekeukes on ther 著。 S ADIDAGGERENNERIEDRETRead The on the way the any crason fin TRA MIDDD LCD on TXT KHARE Thineided c You must sauntut yout tants mal des tw FOTE Wesbin BALSCREER IN Targ To the pracles Hellen The
1. Reproduce the following HTML page that contains a 400 x 400 canvas. CPSC 1045 Assignment 7 - Smiley Mover Reset ● Left Up Down Right 2. Create a function called drawSmile() that draws a smiley face like the one shown on the screenshot below. Then call the drawSmile() function so that when the page loads the smiley is drawn at the center of the canvas. Resul Left Up Down Right 3. Create the functions for the up, down, left, and right buttons. When a direction button is pressed, it should move the smiley a little bit (say 5 or 10 pixels) in the desired direction (left, right, up, down) This can be accomplished by using two global variables, x and y, to keep track of the smiley's location. When a button is pressed, you can erase the entire canvas, update the correct global variable, and call the function to redraw the smiley in its new location The method ctx.clearRect(x, y, width, height) can be used to erase the canvas You must ensure that your object remains on the canvas at all times. This means you must check the x and y coordinates of your drawing to make sure it is not off of the canvas. 4. When the reset button is pressed, the canvas should be cleared, and smiley should be reset back to the center of the canvas.