Purpose

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

Task

You are required to create a 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.

ALL WORK IS INDIVIDUAL: You can follow tutorials on the internet but if you copy and paste then

you will be pulled up on plagiarism.