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

Creating margin on a canvas with jsPDF is a simple task that can be accomplished

Tips on creating a slow and gradual border animation that unfolds smoothly

Using jQuery and AJAX to send a post request in a Razor page and automatically redirect to the view returned by a MVC Action (similar to submitting

What could be causing the issue where only one of my videos plays when hovered over using UseRef?

Discover the art of utilizing two distinct binding strings, wherein upon the selection of either, the alternate binding string shall automatically be

Error during minification process for file opentok.js at line 1310: react-scripts build

Issue with padding in Material UI button component not being applied as expected

Automatically generate the first user on the Parse Server system

Ways to resolve the error "Uncaught TypeError: data.map is not a function"

Having trouble locating the objects in the parent scope of an Angular directive

Save the value of a webpage element into a variable and utilize it across multiple JavaScript files in TestCafe

Transforming a React Class Component into a React Functional Component

Is there a way for me to come back after all child http requests have finished within a parent http request?

Adjust the top margin of content to account for the height of a fixed header

Tips for showcasing the Phaser game screen exclusively within a React route

jQuery fadeIn effect happening at rapid speed

All browsers experiencing issues with autoplay audio function

What is the best way to prevent Firefox from storing the data of a textarea in the local environment?

Is Ursina the right choice for web development?

When the mouse leaves the area, I would like the iframe within the div to be refreshed