New course! Every coder should learn Generative AI!
Try a free lesson0
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
18 Answers
+ 5
I solved the problem
https://code.sololearn.com/WfsTjqucJhTk/?ref=app
+ 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)
+ 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
+ 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 ;)
+ 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.😂
+ 2
You may find answer in https://javascript.info/modifying-document
+ 1
Ãdityã Rãj Shãrmã thank you, but there is no text output
+ 1
Mention your code
0
Hey!
Visit here
Canvas animation(js)
Ex:-
https://code.sololearn.com/WV5GMtCTD2st/?ref=app
0
Hey!
but css animation
Visit text animation
https://code.sololearn.com/W4Np5q5oE34Y/?ref=app
0
Ãdityã Rãj Shãrmã Thank you, really beautiful, but I have another problem...
0
Ãdityã Rãj Shãrmã , visph
https://code.sololearn.com/WzxT0xLiczoU/?ref=app
I need to output variable "i" on the blue image
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>
0
visph thank you very very much!
0
Takashi thank you!!!
0
luis calderón thank you!!!
0
Mwikisa Delton Kapesa Lufungulo thank you)
0
narayanaprasad thank you!
Often have questions like this?
Learn more efficiently, for free:
Hot today
Problem
0 Votes
USING HTML ONLY!!!
5 Votes
Effects on HTML and JavaScript
0 Votes
Programming sickness
3 Votes
Help. Помогите пожалуйста
1 Votes
Izzy the iguana
0 Votes