blink using canvas

by mohayonao

HTML

<canvas id="canvas"></canvas>

CSS

* { padding:0;margin:0;width:100%;height:100%;background:black }

JavaScript

$(function() {
    "use strict";
    
    var canvas = document.getElementById("canvas");
    canvas.width  = 1;
    canvas.height = 1;
    
    var context = canvas.getContext("2d");
    
    var count = 0;
    var doAnimation = true;
    
    var animate = function() {
        count += 1;
        
        context.fillStyle = (count % 2) ? "white" : "black";
        context.fillRect(0, 0, 1, 1);
        
        if (doAnimation) {
            requestAnimationFrame(animate);
        }
    };
    
    animate();
    
    $(document.body).on("click", function() {
        doAnimation = false;
    });
});