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

In this case, the ‘Blinking’ of the stars is caused by a logic error in determining the stars’ distance (color) value.

distance = Math.random() * 240; // This is not guaranteed to return an integer

distance = (Math.random() * 240)>>0; // This rounds down the result to nearest integer

Double buffering is usually unnecessary for canvas, as browsers will not display the drawn canvas until the drawing functions have all been completed.