Text randomly appears on the html page

Question

Text randomly appears on the html page

I've been dedicating a significant amount of time to finding a solution, but haven't had any luck.

I'm aiming to create a visual effect where 10 words with varying font sizes slide in from different directions on a canvas within my document. I've attempted some coding (link to jsFiddle), but I'm struggling to make progress. Any guidance or advice would be greatly appreciated.

var can, ctx, step, steps = 0,
  delay = 20;

function init() {
  can = document.getElementById("MyCanvas1");
  ctx = can.getContext("2d");
  ctx.fillStyle = "blue";
  ctx.font = "20pt Verdana";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  step = 0;
  steps = can.height + 50;
  RunTextRightToLeft();
}

function RunTextRightToLeft() {
  step++;
  ctx.clearRect(0, 0, can.width, can.height);
  ctx.save();
  ctx.translate(can.width / 2, step);
  ctx.fillText("Welcome", 0, 0);
  ctx.restore();
  if (step == steps)
    step = 0;
  if (step < steps)
    var t = setTimeout('RunTextRightToLeft()', delay);
}

canvas {
  border: 1px solid #bbb;
}
.subdiv {
  width: 320px;
}
.text {
  margin: auto;
  width: 290px;
}

<body onload="init();">
  <div class="subdiv">
    <canvas id="MyCanvas1" width="300" height="200">
    </canvas>
  </div>
</body>

Appreciate your help!

javascript html css canvas html5-canvas

Answer 1

Answer №1

Looking to bring words to life in your sentences? Here's a neat way to animate them:

Check out this guide on animating words

Start by defining word objects within an array:

var words=[];

words.push({
    text:'Hello',
    // starting x,y coordinates offscreen
    x0:Math.random()*cw,
    y0:(Math.random()*100)+ch,
    // final position of the word onscreen
    x1:20,
    y1:50,
    // font size
    size:10,
    // delay before animation starts
    delay:200,
    // percentage progress of animation
    pct:0
});

Determine where each word should end up to form a sentence:

var accumX=0;
for(var i=0;i<words.length;i++){
    w=words[i];
    // measure the word and assign its ending x1 value
    ctx.font=w.size+'px verdana';
    var width=ctx.measureText(w.text).width;
    w.x1=accumX;
    accumX+=(width+8);
    // calculate interim waypoints for animation
    w.dx=w.x1-w.x0;
    w.dy=w.y1-w.y0;
}

Now let's animate each word from its initial position [x0,y0] to its end point [x1,y1]:

var start=performance.now();
requestAnimationFrame(animate);

function animate(time){
    var countComplete=0;
    // clear canvas for new frame
    ctx.clearRect(0,0,cw,ch);
    for(var i=0;i<words.length;i++){
        var w=words[i];
        if(w.pct==100){countComplete++;}
        // calculate x,y waypoint based on percentage completion
        var x=w.x0+w.dx*w.pct/100;
        var y=w.y0+w.dy*w.pct/100;
        w.pct=Math.min(100,w.pct+1);
        // draw the animated text
        ctx.font=w.size+'px verdana';
        ctx.fillText(w.text,x,y);
    }
    // request another loop if animation is not complete
    if(countComplete<words.length){
        requestAnimationFrame(animate);
    }
}

Answer 2

Looking to bring words to life in your sentences? Here's a neat way to animate them:

Check out this guide on animating words

Start by defining word objects within an array:

var words=[];

words.push({
    text:'Hello',
    // starting x,y coordinates offscreen
    x0:Math.random()*cw,
    y0:(Math.random()*100)+ch,
    // final position of the word onscreen
    x1:20,
    y1:50,
    // font size
    size:10,
    // delay before animation starts
    delay:200,
    // percentage progress of animation
    pct:0
});

Determine where each word should end up to form a sentence:

var accumX=0;
for(var i=0;i<words.length;i++){
    w=words[i];
    // measure the word and assign its ending x1 value
    ctx.font=w.size+'px verdana';
    var width=ctx.measureText(w.text).width;
    w.x1=accumX;
    accumX+=(width+8);
    // calculate interim waypoints for animation
    w.dx=w.x1-w.x0;
    w.dy=w.y1-w.y0;
}

Now let's animate each word from its initial position [x0,y0] to its end point [x1,y1]:

var start=performance.now();
requestAnimationFrame(animate);

function animate(time){
    var countComplete=0;
    // clear canvas for new frame
    ctx.clearRect(0,0,cw,ch);
    for(var i=0;i<words.length;i++){
        var w=words[i];
        if(w.pct==100){countComplete++;}
        // calculate x,y waypoint based on percentage completion
        var x=w.x0+w.dx*w.pct/100;
        var y=w.y0+w.dy*w.pct/100;
        w.pct=Math.min(100,w.pct+1);
        // draw the animated text
        ctx.font=w.size+'px verdana';
        ctx.fillText(w.text,x,y);
    }
    // request another loop if animation is not complete
    if(countComplete<words.length){
        requestAnimationFrame(animate);
    }
}

Text randomly appears on the html page

Answer №1

Similar questions

The function get_template_directory_uri() returned an unexpected string error

Ways to store AJAX response data for future use

Struggling to make the upvoting feature function properly in the Thinkster MEAN Stack Tutorial

What could be causing the lack of responsiveness in my font size when adjusting to different screen sizes?

Error: The index "id" is not defined

JQuery Function for Repeatedly Looping through Div Elements

Display and conceal specific table cells based on a user's search for a singular cell

The JavaScript code for summing two numbers is not functioning as expected

The speed at which Laravel loads local CSS and JS resources is notably sluggish

What is the process for extracting the differences between two or three files and merging them together in Node.js?

Implement dynamic configuration injection by allowing users to specify the name of a configuration file during runtime, instead of having it fixed in the code

Ensure that the loop is fully executed before proceeding with any additional code

"Major issues arise as CSS3 Animation fails to function properly across all web

I am having issues with Tailwind CSS overriding the responsive padding on my website

Searching for a deeply nested JSON property with lodash

issue arising where the table's border is not displaying

Is there any benefit to making the SVG elements width and height 100%?

The flex container cannot contain all of the content due to an

Utilizing numerous instances of setInterval

How to choose a javascript drop down using selenium?