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

Task

You ride on the road in a car. You are not the driver, the car has an autopilot. A few minutes later, the car will go to an intersection with a traffic light.

Unfortunately, you suddenly find that the car's traffic light recognition module doesn't work. Your task is to repair it and let it pass through the intersection smoothly.

The traffic light recognition module is a function check. When close to the intersection, the system will capture a image of traffic light, and then send this image and current time to the function check. function check should return a string ("MM:SS") represents the time for the car to move forward.

The image(argument trafficLight) looks like this:

As you can see, there are three lights(red, yellow, green) on the left part, and two digits on the right part.

Argument currentTime is a string using "MM:SS" format. MM is minute and SS is second. The result should be "MM:SS" format too.

How to get the information from the image?

• Create a image object. Using the following code:

  var xxx = new Image()
  xxx.src = "...."
  

  xxx is name of the image object. "...." is link of the image(argument trafficLight)

• Draw the image to canvas.

  object.drawImage(imageObject,x,y)
  

  Using this method can draw the image object to canvas. x,y are the coordinates of top-left corner.

• Get data of the pixels

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

  Using this method can get the data of a width x height area. x,y are the coordinates of top-left corner. The return value is an object like {data:[0,0,0,0,...]}. Each pixel use 4 bits, represents the data of red, green, blue, alpha. For example:

  var smallImg = ctx.getImageData(10,10,5,5)
  console.log(smallImg)
  

  A 1D Uint8 array will be print to screen, it has 100(5 x 5 x 4) elements.

  ImageData {
  data: 
   Uint8ClampedArray [0,0,0,0,...,0,0,0,0] }
  

Some details of traffic light image

• The size of image is 140 x 100.

• Each light has two states: on and off.

  The color code of lights are:
            on         off
  red    "#ff0000"  "#550000"
  green  "#00ff00"  "#005500"
  yellow "#ffff00"  "#555500"
  

• Each digit is a 5 x 7 "red" dot matrix. For two adjacent dots, their vertical interval is 10 pixels, and the horizontal interval is 7 pixels(from center to center).

• Here is a preloaded variable "NUMS"(3D integer array) that can help you to compare these digits. There are 10 subarray in NUMS, represent digits 0,1,2,...,9, respectively. Each subarray is a 7x5 matrix(2D integer array). It contains only 1 or 0, where 1 represents the dot and 0 represents empty.

Switching rules of traffic light

• Two digits are switching in the order of countdown, reduce 1 per second.

  red light:    60, 59, 58, ..., 02, 01, 00  
  yellow light: 03, 02, 01, 00
  green light:  60, 59, 58, ..., 02, 01, 00
  

• If the number counting down to "00", next second will change to another light.

  ... -> red -> yellow -> green -> red -> ...
  

• Mraning of lights

  • Red light: All cars should stop.
  • Yellow light: Time to prepare.
  • Green light: The car can move forward.

Examples

• For trafficLight =

and currentTime = "00:00", the output image should be: "00:01".

Time    00:00    00:01
Light   yellow   green
Digits  00       60

• For trafficLight =

and currentTime = "00:59", the output image should be: "01:00".

Time    00:59    01:00
Light   yellow   green
Digits  00       60

• For trafficLight =

and currentTime = "00:52", the output image should be: "00:58".

Time    00:52  00:53  00:54  00:55  00:56  00:57  00:58
Light   red    red    yellow yellow yellow yellow green
Digits  01     00     03     02     01     00     60

• For trafficLight =

and currentTime = "00:55", the output image should be: "01:01".

Time    00:55  00:56  00:57  00:58  00:59  01:00  01:01
Light   red    red    yellow yellow yellow yellow green
Digits  01     00     03     02     01     00     60

• For trafficLight =

and currentTime = "00:55", the output image should be: "00:55".

When the green light is on, cars can moving forward immediately.