CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Aditya
Aditya

Reputation: 39

HTML5-canvas make circles blink inside a canvas

I've drawn few small circles(filled with red color) inside a canvas as a markup, and now i want them to blink on which i'm failing to succeed. Please anyone help, I'm stuck.

var X = 135;
var Y = 70;

function button() {
    var butt = c.getContext("2d");
    butt.beginPath();
    butt.arc(X, Y, 4, 0, 2 * Math.PI);
    butt.fillStyle = "#FF0000";
    butt.fill();
    butt.stroke();
    butt.css('visibility', butt.css('visibility') === 'hidden' ? '' : 'hidden')
}
button();
button(X = 200, Y = 100);
button(X = 280, Y = 200);

Upvotes: 4

Views: 4353

Answers (1)

Lorenz Meyer
Lorenz Meyer

Reputation: 19915

First you have to make two changes to your function. Pass in parameters and return a reference to the button. 

function button(X, Y) {
    var butt = c.getContext("2d");
    butt.beginPath();
    butt.arc(X, Y, 4, 0, 2 * Math.PI);
    butt.fillStyle = "#FF0000";
    butt.fill();
    butt.stroke()
}

This allows you to create the buttons like this and keep a reference :

b1 = button(135, 70);
b2 = button(200, 100);
b3 = button(280, 200);

You can then create a function that toggles visibility and call it like 

function toggle_button(items){
    items.forEach(function(item) {
        item.css('visibility', item.css('visibility') === 'hidden' ? 'visible' : 'hidden')
    });
    setTimeout(function toggle_buttons(items),500);
}

setTimeout(function toggle_buttons([b1, b2, b3]),500);

In order to blink, the function toggle_buttons must set a timeout itself to keep the blinking going on.

Upvotes: 4

Related Questions