karaoke text rendering effect in my code is slow

Question

I want the effect to run immediately when I call the function, but when I call the function I have to wait 3-4 seconds for the effect to work.

I use canvas in HTML

const canvas = document.querySelector("#draw-pad"); const ctx = canvas.getContext("2d"); function runTextAnimation(text) { var x = canvas.width / 2; var y = canvas.height / 2; var txt = text; var w = 0; var clearH = 40; var clearY = 5; var clearX = 8; ctx.font = 'bold 17px Arial'; ctx.lineWidth = 2; ctx.strokeStyle = 'black'; function runText() { if (w > 500) { ctx.clearRect(clearX, clearY, w, clearH); w = 0; } if (w === 0) { ctx.fillStyle = 'lightblue'; ctx.strokeText(txt, x, y); ctx.fillText(txt, x, y); ctx.fillStyle = 'red'; } ctx.save(); ctx.beginPath(); ctx.clearRect(clearX, clearY, w, clearH); ctx.rect(clearX, clearY, w, clearH); ctx.clip(); ctx.strokeStyle = 'white'; ctx.strokeText(txt, x, y); ctx.fillText(txt, x, y); ctx.restore(); w += 1.92; window.requestAnimationFrame(runText); } runText(); } runTextAnimation("chắc không phải một người như anh")

<canvas id="draw-pad" width="578" height="50"></canvas>

I want the effect to run immediately when I call the function, but when I call the function I have to wait 3-4 seconds for the effect to work.

It has to do with where the text is positioned. If you set x to zero it starts right away. — James
– James, Commented Apr 15, 2024 at 15:18
@James this is my repo github.com/TranHuuHieu15/Javascript_F8/tree/main/…, pls help me, i need it now, My English is a bit bad. If I make you uncomfortable, I'm sorry — Hieu_Tran
– Hieu_Tran, Commented Apr 15, 2024 at 16:17

Helder Sepulveda · Accepted Answer · 2024-04-16 00:10:43Z

Instead of using a clearRect and all the other complexity you could simply draw partial text using substring your code will be significantly smaller, (and easier to read in my eyes) I'm also using setInterval to have more control on the time delay between letters

const canvas = document.querySelector("#draw-pad"); const ctx = canvas.getContext("2d"); const delay = 100 var w = 0 function textAnimation(text, x, y) { ctx.reset(); ctx.font = 'bold 17px Arial'; ctx.lineWidth = 4; ctx.fillStyle = 'lightblue'; ctx.fillText(text, x, y); ctx.fillStyle = 'red'; ctx.fillText(text.substring(0, w), x, y); if (w++ > text.length) w = 0 } setInterval( () => textAnimation("chắc không phải một người như anh", 300, 20), delay )

<canvas id="draw-pad" width="600" height="50"></canvas>

But if this truly is for a karaoke you have other problems with the delay, when singing not all words have the same speed, so that will be something else you need to account for, you will need to get that data from some source and incorporate that into the logic

Thank you very much, I also tried each word for a while but there were some errors so I temporarily did it this way.
this is my repo github.com/TranHuuHieu15/Javascript_F8/tree/main/…, can you check it
@Hieu_Tran why do you want me to check your repo? ... if you have a new question make a new post, StackOverflow is not a free coding service

Collectives™ on Stack Overflow

karaoke text rendering effect in my code is slow

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related