CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
new coder
new coder

Reputation: 73

Display a string on canvas for only fraction of seconds

I have written a code in which my word should be displayed on clicking start button for some fraction of seconds. How do i do it?

function start()
    {

      block.x = 0;
      for (var i = 0; i < boxes.length; i++) 
      {
          resetbox(boxes[i]);


      }
    if (!continueAnimating) 
    {
        continueAnimating = true;
        animate();
    }
    }

And i want to display this for lets say 5 seconds: var text=randomLetter(nu);

See Demo

Upvotes: 1

Views: 758

Answers (2)

Manwal
Manwal

Reputation: 23816

I can give you simple demo for writing and clearing text in canvas in 1 second on Button Click:

DEMO

Code:

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");

function clear(){
     ctx.clearRect(0,0,c.width,c.height);
}

function write()
{
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    
    ctx.font="20px Georgia";
    ctx.fillText("Hello World!",10,50);
    
    ctx.font="30px Verdana";
    // Create gradient
    var gradient=ctx.createLinearGradient(0,0,c.width,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");
    // Fill with gradient
    ctx.fillStyle=gradient;
    ctx.fillText("Big smile!",10,90);
}

function start()
    {
        write();
        setTimeout(function(){
            clear();
        },1000);
    }

Upvotes: 2

prog1011
prog1011

Reputation: 3495

Try Below Code - You have to use setTimeout()

Click Here to See Working Demo

HTML

<div id="someDiv">Your Text Here</div>
<input id="SomeButton" type="button" value="Start">

Jquery

$(document).ready(function(){
       $("#someDiv").hide();
    $("#SomeButton").click(function(){            
        start();
    });        
});

function start()
{
    $("#someDiv").show();
    setTimeout(function () {
                    $("#someDiv").fadeOut(1000, function () { $(this).hide(); });
                }, 2000);
}

Upvotes: 0

Related Questions