JSFiddle - React, Tailwind, and code Playground

by Matthew Ekenstedt

HTML

<button onclick="startBlinking()">Start Blinking!</button>
<canvas id="canvas1" width="500px" height="300px" />

JavaScript

function startBlinking()
{
    var c = document.getElementById("canvas1");
    var blinker = new Blinker(c, "Welcome to my homepage! Sign my guestbook!", 500, 20, 20);
}


function Blinker(canvas, blinkingText, period, xloc, yloc)
{
    this.textVisible = false;
    this.canvas = canvas;
    this.text = blinkingText;
    this.xloc = xloc;
    this.yloc = yloc;
    this.period = 1000;
    var self = this; // This is to pass the reference into setInterval
    this.interval = setInterval(function() { self.doBlink(); }, this.period);
    this.doBlink = function()
    {
        var context = this.canvas.getContext("2d");
        if(this.textVisible)
        {    
            context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            this.textVisible = false;
        }
        else
        {
            this.drawText();
        }
    };
    this.drawText = function()
    {
        var context = this.canvas.getContext("2d");
        context.fillText(this.text, this.xloc, this.yloc);
        this.textVisible = true;
    };
}