Homework answers / question archive / You are required to create simple web-page containing an HTML5 Canvas, displaying an animated animal mimicking connect the dots game using JavaScript

You are required to create simple web-page containing an HTML5 Canvas, displaying an animated animal mimicking connect the dots game using JavaScript

Computer Science

Share With

You are required to create simple web-page containing an HTML5 Canvas,

displaying an animated animal mimicking connect the dots game using JavaScript.
Basic Animation When the page is loaded the canvas should display at least 50 dots that allow strokes to be drawn between these dots to form an animal shape with the following characteristics:
• The leftmost dot is at x=7, and y can be anything (i.e. the leftmost part of the animal body is touching the left side of the canvas, see diagram below, right)
• Size of each dot - radius 7
• Starting from the topmost dot of the animal, draw a stroke (clockwise) between each pair of dots to form the animal shape, continue until complete.
• Stroke width - 7 pixels
• Wait 3 seconds before automatically drawing the next stroke (between the next pair of dots).
• Stroke colours - blue, red, yellow
• Stroke style - gradient
• Note that the canvas size should occupied the full width and height of the screen with zero margin on all sides. The canvas border should have solid style with the width of 2 pixels. When all the strokes are drawn (the canvas shows the completely drawn animal), move the drawn animal to the right by 4 pixels at a time until the rightmost part of the animal touches the rightmost border of the canvas.


Advanced Features :
Change the page so that when it is loaded the canvas is blank, displaying two buttons:
• Begin Animation (changes to 'Stop' once it is clicked)
• Clear screen When the 'Begin Animation' button is pressed, the dots should be displayed on the screen with the following characteristics:
• Move the positions of all the dots so the completely drawn animal is now in the middle of the canvas.
• Draw the animal as per the Basic Animation.
• Once the animal is drawn, move the animal towards the right, left, top, or bottom (randomly selected each time button is clicked) of the canvas, this keeps going until the user press "Stop" button, or the animal reaches the edge. If the "Stop Animation" button is clicked then all drawing/animation is stopped, and the button label reverts to "Begin Animation". Clicking begin again will restart the drawing from the beginning. Frontend and Coding Your webpage must include an HTML5 Canvas and buttons as needed. This will be the frontend of your site, which the users interact with directly. Animation, drawing, and so on, must be implemented using appropriate JavaScript code