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..
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)
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 ;)
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
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.😂