How to change text colour for a javascript variable

Question

I would like to know if it is possible to add a color style to a javascript variable?

What I am trying to do is on a canvas, I have a whole lot of different text (prizes on a winning wheel circle) and I would like each prize text to be a different colour.

This is my code so far:

var prize1 = "car",
    prize2 = "boat",
    prize3 = "cycle",
    prize4 = "scooter",
    prize5 = "jet ski";

var prizes = [prize3, prize1, prize4, prize3, prize5, prize4,
              prize3, prize2, prize4, prize3, prize1,
              prize4, prize3, prize5, prize4, prize2];

And these get drawn onto a canvas.

Is it possible to do what I am trying to achieve? If not, does anyone have any other suggestions?

Any help would be greatly appreciated.

Answer 1

Of course it's possible, you can draw anything you like with canvas. Color is just one of the many attributes that you can directly use when drawing.

Answer 2

Use object type instead.

var prize1 = {
   title: "car"
   color: "red"
},
...

in rendering cycle use prize[i].title and prize[i].color as you wish.

And I strongly don't recommend you use var1 , var2 etc. Just create one variable with all objects:

var prizes = [
   {...},
   {...},
   ...
]