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

Purpose

The purpose of this assignment is to check your basic web development and JavaScript skills.

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 colors – blue, red, yellow

• Stroke style – gradient

• Note that the canvas size should occupy the full width and height of the screen with zero margin on all sides. The canvas border should have a solid style with a 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 the “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 begins again and 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 front end of your site,  which the users interact with directly. Animation, drawing, and so on, must be implemented using appropriate JavaScript code.