0

How to add text using JS ??

I have a canvas with a background image. There is also a button image on canvas. How to add text to this button using JS ?? (I need to add a variable value) // sometimes I can add text, but it is hidden behind the background image.. Thanks! https://code.sololearn.com/WzxT0xLiczoU/?ref=app

1st Apr 2020, 9:25 AM
PR PRGR
PR PRGR - avatar
18 Answers
3rd Apr 2020, 2:16 AM
CoffeeByte
CoffeeByte - avatar
+ 3
Your canvas is under the button image and must be there to see the button hover as it has a background image wich will hide the button... so it's absolutly impossible to draw anything inside this canvas wich would be above the button. If you really want to use a canvas to draw your text, you must have another, positionned hover the button (and without background to keep transparency) as you've done with the image button hover the background canvas... Anyway, I will advise you that there's more efficient ways to output text dynamically: rather than a canvas, position a div or any html 'classic' (designed for text) container ^^ (see code in next post)
1st Apr 2020, 7:36 PM
visph
visph - avatar
+ 3
You can try to use z-index to overlap the canvas then you try to position your text with css and use js to dynamically add the value or you can just research learn about the canvas api. Once you know what stroketext() is you will answer your question
1st Apr 2020, 7:59 PM
Taki
Taki - avatar
+ 2
without your code anybody would be able to give you an accurate response (wich mostly depends of your page structure; even uf you try to describe it, we are missing a lot of important details) ^^ please go to the code playground, save your code inside it and share the link to let us inspect it ;)
1st Apr 2020, 2:22 PM
visph
visph - avatar
+ 2
Use the canvas Rendering 2D context to paint the image button to the canvas. And then after that, You can paint the text to the canvas. You just have to take note of the coordinates. And the one which should come first.😂
3rd Apr 2020, 8:02 AM
Mwikisa Kapesa Lufungulo
Mwikisa Kapesa Lufungulo - avatar
4th Apr 2020, 2:45 AM
narayanaprasad
narayanaprasad - avatar
+ 1
Ãdityã Rãj Shãrmã thank you, but there is no text output
1st Apr 2020, 10:12 AM
PR PRGR
PR PRGR - avatar
+ 1
Mention your code
1st Apr 2020, 10:21 AM
SAN
SAN - avatar
0
Hey! Visit here Canvas animation(js) Ex:- https://code.sololearn.com/WV5GMtCTD2st/?ref=app
1st Apr 2020, 10:06 AM
SAN
SAN - avatar
0
Hey! but css animation Visit text animation https://code.sololearn.com/W4Np5q5oE34Y/?ref=app
1st Apr 2020, 10:14 AM
SAN
SAN - avatar
0
Ãdityã Rãj Shãrmã Thank you, really beautiful, but I have another problem...
1st Apr 2020, 10:20 AM
PR PRGR
PR PRGR - avatar
0
Ãdityã Rãj Shãrmã , visph https://code.sololearn.com/WzxT0xLiczoU/?ref=app I need to output variable "i" on the blue image
1st Apr 2020, 6:29 PM
PR PRGR
PR PRGR - avatar
0
<!DOCTYPE html> <html> <head> <title>Text</title> <style> body { margin-top: 50px; margin-left: 4%; } #blue_pic, img { position: absolute; } </style> </head> <body> <canvas id="canvas" width="300" height="400" style="background: url(https://www.designyourway.net/blog/wp-content/uploads/2018/11/pastel-background-goo-1250x834.jpg);"></canvas> <div id="blue_pic" style="left: 60px; top: 100px; width:200px; height:70px;"> <img src="https://www.freepnglogos.com/uploads/button-png/small-button-clip-art-clkerm-vector-clip-art-37.png" style="width:100%;height:100%;"> <div id="txt_btn" style="width:100%;height:100%;display:table; position:relative;"><div style="display:table-cell; vertical-align:middle; text-align:center;">5</div></div> </div> <script type="text/javascript"> var i=5; var t=document.getElementById('txt_btn').lastChild; setInterval(function(){ t.textContent = i--; if (i<0) i=5; },1000); </script> </body>
1st Apr 2020, 7:36 PM
visph
visph - avatar
0
visph thank you very very much!
1st Apr 2020, 9:47 PM
PR PRGR
PR PRGR - avatar
0
Takashi thank you!!!
1st Apr 2020, 9:48 PM
PR PRGR
PR PRGR - avatar
0
luis calderón thank you!!!
4th Apr 2020, 1:17 PM
PR PRGR
PR PRGR - avatar
4th Apr 2020, 1:17 PM
PR PRGR
PR PRGR - avatar
0
narayanaprasad thank you!
4th Apr 2020, 1:18 PM
PR PRGR
PR PRGR - avatar