CODEWITHSUNDEEP
javascripthtmlcanvas
Cameron
Cameron

Reputation: 28853

HTML5 Canvas color help

Hi I have this simple array inside my variable with some colors

var clr = ['#FF0000', '#0000FF', '#FFFF00', '#008000', '#FFA500', '#800080', '#ffffff'];

and then a function which should return one of those values in single quotes

function colors() {
    var color;
    color = "'";
    color += Math.floor(Math.random() * clr.length);
    color += "'";
    return color;
}

this function is then called to show various colored balls

function CreateBall(x, y, vx, vy, r, s) {
    this.color = colors();
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.r = r;
    this.size = s;
}

However it doesn't work? Any ideas why?

To see the full code, please look at the source here: http://dev.driz.co.uk/pool

Upvotes: 3

Views: 477

Answers (2)

Andy E
Andy E

Reputation: 344733

At the moment, the value returned from colors() is a string that looks something like "'#ffffff'". When this colour value is actually applied a syntax error is thrown on the following line:

122: gradient.addColorStop(.85, ball[i].color);

This is likely to be caused by the single quotes you're wrapping around to your returned colour — you don't need to do this since it's already a string value. You also never actually pluck the values out of your array. Use this for your colors() function:

function colors() 
{
    return cls[Math.floor(Math.random() * clr.length)];
}

Upvotes: 4

user372551
user372551

Reputation:

This should fix your problem 

function colors() {
    return clr[Math.floor(Math.random() * clr.length)];
}

Demo

Upvotes: 2

Related Questions