Welcome to Canvas Fun ;-) In this series, we'll learning how to draw the image on a canvas.

Task

You have a mini cell phone. The screen resolution is 90x160. Its screen is locked.

You have to draw the unlocked pattern like this:

As you can see, there are 9 buttons on the screen. We call them 1 to 9:

1 2 3
4 5 6
7 8 9

You are given an array seq, it represents the sequence of unlocked buttons. Your task is to draw lines between each pair of buttons on the canvas(of course, before that, you need to draw the basic screen ;-)).

For example, if seq = [1,2,3], you should draw two lines: button1 to button2, then button2 to button3.

In order to complete your task, you need the following knowledge, steps, and standards (a bit lengthy, please read patiently):

• Create a canvas object

Using the following code can create a canvas object with specified width and height:

var canvas = new Canvas(width,height)
var ctx = canvas.getContext('2d'); 

ctx is the object instance we need.

• Fill the background color of screen

You need to draw a rectangle that covers the entire screen.

You might need the following two methods:

object.fillStyle = colorCode

Set the color of fill action. colorCode can be a Hex string, such as "#ffffff","#000000"; Or a word of color, such as "white","black","gray",etc..

object.fillRect(x,y,width,height)

Coordinate x,y as the top-left coner of rectangle, drawing a rectangle of size width x height.

the background color of screen is "black".

• Draw the border of screen

Draw a white border of screen.

You might need the following two methods:

object.strokeStyle = colorCode

Set the color of stroke action. colorCode can be a Hex string, such as "#ffffff","#000000"; Or a word of color, such as "white","black","gray",etc..

object.strokeRect(x,y,width,height)

Coordinate x,y as the top-left coner of rectangle, drawing a hollow rectangle of size width x height.

the border color is "white".

• Draw the buttons 1 to 9

Draw the buttons 1 to 9 with untouched style (a gray hollow circle is outside, and a yellow solid circle is in it).

You might need the following methods:

object.beginPath()

Mark the beginning of a drawing path.

object.arc(x,y,radius,begin,end)

Generate a path of circle. Coordinate x,y as the center of circle, radius is the radius of circle, begin, end are the begining and ending degree of circle.

For example: ctx.arc(15,50,2,0,2*Math.PI) will make a path of a whole circle at point(15,50), its radius is 2.

object.fill()

Using fill action to fill the current path. If you want to draw a solid circle, you should put this sentence after object.arc().

object.stroke()

Using stroke action to stroke the current path. If you want to draw a hollow circle, you should put this sentence after object.arc().

Note: before you execute fill() or stroke(), you should specify the color (using object.fillStyle = "xxx" or object.strokeStyle = "xxx")

For precise positioning, the coordinates of the center of the 9 buttons are:

1:[15,50]  2:[45,50]  3:[75,50]

4:[15,80]  5:[45,80]  6:[75,80],

7:[15,110] 8:[45,110] 9:[75,110]

hollow circle: radius = 6, color = "gray"

solid circle: radius = 2, color = "yellow"

object.closePath()

Close and clear current path. You should execute it, after current path is drawn.

Note: If you draw the image correct, you can pass the first basic testcases(seq=[]). If not, please check your code carefully.

• Draw the unlock pattern

Hmm.. This is the second last work we should do (the last work is return the result)

Draw lines between each pair of buttons in seq and change each button to touched style.

Note: Please draw the image in the following order strictly. Otherwise, the image data you generate will be different from the reference image data.

Traversing seq from left to right, for each pair of buttons(let's say, buttonA and buttonB):

1. If buttonA is untouched style(gray hollow circle), change it to touched style(draw a yellow hollow circle to cover the gray hollow circle). If it's already touched style, don't draw it again.

2. If buttonB is untouched style(gray hollow circle), change it to touched style(draw a yellow hollow circle to cover the gray hollow circle).If it's already touched style, don't draw it again.

3. If there is no line between buttonA and buttonB, draw a line from buttonA to buttonB, color = "yellow". If there is a line between buttonA and buttonB already, don't draw the line again.

It is guaranteed that each pair of adjacent elements represents different buttons, invalid testcase such as [1,1] will not appears.

You might need the following methods:

object.moveTo(x,y)

Move current start position of drawing path to coordinate x,y.

object.lineTo(x,y)

Make a drawing path from current start position to coordinate x,y.

object.stroke()

Using stroke action to stroke the current path.

Of course, you also need beginPath() and closePath().

• Return your image

Finally, using this to return your image:

return canvas.toDataURL()

Example

For seq = [], the output image should be:

No pattern now.

For seq = [1,2,3], the output image should be:

For seq = [1,2,3,5,7,8,9], the output image should be:

For seq = [1,2,3,7,8,9], the output image should be:

Note that button 5 should not change to touched style, because it's not in the seq.

For seq = [7,1,8,3,9,6,2,4,5,6], the output image should be:

For seq = [7,5,3,9,6,2,1], the output image should be:

For seq = [3,5,2,7,6,5], the output image should be:

For seq = [5,8,7,2,9,8], the output image should be:

For seq = [4,8,9,6,2,1,7,5,3,2], the output image should be:

For seq = [9,1,6,2,4,3,5,7], the output image should be:

For seq = [1,3,4,9,7,6,1], the output image should be:

For seq = [2,1,4,7,8,4,2,6,8,9,3,2], the output image should be:

For seq = [1,6,7,2,9,4,3,8,1], the output image should be:

Can you draw these beautiful images correctly? I'm waiting for you ;-)