HTML 5 canvas animation - objects blinking

Question

I am learning ways of manipulating HTML 5 Canvas, and decided to write a simple game, scroller arcade, for better comprehension. It is still at very beginning of development, and rendering a background (a moving star field), I encountered little, yet annoying issue - some of the stars are blinking, while moving. Here's the code I used:

var c = document.getElementById('canv');

var width = c.width;
var height = c.height;
var ctx = c.getContext('2d');//context

var bgObjx = new Array;
var bgObjy = new Array;
var bgspeed = new Array;

function init(){
    for (var i = 1; i < 50; i++){
        bgObjx.push(Math.floor(Math.random()*height));
        bgObjy.push(Math.floor(Math.random()*width));
        bgspeed.push(Math.floor(Math.random()*4)+1);
    }
    setInterval('draw_bg();',50);
}

function draw_bg(){
    var distance; //distace to star is displayed by color

    ctx.fillStyle = "rgb(0,0,0)";
    ctx.fillRect(0,0,width,height);

    for (var i = 0; i < bgObjx.length; i++){
        distance = Math.random() * 240;
        if (distance < 100) distance = 100;//Don't let it be too dark
        ctx.fillStyle = "rgb("+distance+","+distance+","+distance+")";
        ctx.fillRect(bgObjx[i], bgObjy[i],1,1);
        bgObjx[i] -=bgspeed[i];
        if (bgObjx[i] < 0){//if star has passed the border of screen, redraw it as new
            bgObjx[i] += width;
            bgObjy[i] = Math.floor(Math.random() * height);
            bgspeed[i] = Math.floor (Math.random() * 4) + 1;
        }
    }
}

As you can see, there are 3 arrays, one for stars (objects) x coordinate, one for y, and one for speed variable. Color of a star changes every frame, to make it flicker. I suspected that color change is the issue, and binded object's color to speed:

for (var i = 0; i < bgObjx.length; i++){
    distance = bgspeed[i]*30;

Actually, that solved the issue, but I still don't get how. Would any graphics rendering guru bother to explain this, please?

Thank you in advance.

P.S. Just in case: yes, I've drawn some solutions from existing Canvas game, including the color bind to speed. I just want to figure out the reason behind it.

Answer 1

Used to see a similar effect when programming direct2d games. Found a double-buffer would fix the flickering.

Not sure how you would accomplish a double(or triple?)-buffer with the canvas tag, but thats the first thing I would look into.