Make lines blink inside a canvas

Question

I'm currently working on a HTML5 and Javascript project using Kinetic Js and canvas.

I need my lines (Kinetic.Line) to blink.

I've tried something consisting of an infinite loop with setTimeout function inside, but I can't use javascript then (such a drawback because then I can't select points!).

Does somebody have an idea that can help me?

while (1) {
setTimeout("stage.load(myjson[0])", 1000);
setTimeout("stage.load(myjson[1])", 1000);
}

(sorry for my poor english)

Answer 1

Here's one way of making a line blink using KineticJS. Rather than using setTimeout, I think it's better to use the KineticJS onFrame event which is built into the stage object. You can then use setAlpha to set the opacity of the line, and getAlpha to get the current opacity of the line. setAlpha('0') will make the line transparent, setAlpha('1') will make the line visible.

I've set up a fiddle here: JSFiddle

Here's the relevant bit that actually flashes the line:

var flashTime = 0;

stage.onFrame(function(frame){
    if(frame.time > (flashTime + 250)){;
        flashTime = frame.time;
        redLine.setAlpha(redLine.getAlpha() == 1 ? '0' : '1');
        layer.draw();                                
    };                                        
});