How can I get my function to display text over an image?

Question

I'm trying to input text into a html form field (button) which will then be displayed on the same page over an image. Any advice of how I could get the two talking to each other would be really appreciated.

<canvas id="myCanvas" width="900" height="600" style="border:1px solid #404040;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
  var canvas = document.getElementById("myCanvas"); 
  var ctx = canvas.getContext("2d");
  var img =new Image();
  img.onload = function() {
    ctx.drawImage(img, 0, 0, 900, 600);

    function myFunction() {
      document.getElementById("line1").innerHTML;
      var line1 = document.getElementById("line1").value;
      var line2 = document.getElementById("line2").value;
      var line3 = document.getElementById("line3").value;
    }
    //the code below positions the overlaying text on the image
    ctx.font = "bold 36px Times";
    ctx.fillStyle = "black";
    ctx.fillText ("line1",400,325);
    ctx.fillText ("line2",400,375);
    ctx.fillText ("line3",400,425);
  }

  //this is the image 
  img.src= "bus_red.gif"
</script>

 //the code below allows the user to input text into boxes

<div>
  <form>
    <label for="line1">Enter your text: </label>
    <input type="text" autocomplete="off" id="line1" placeholder="line1"><br>
    <label for="line2">Enter your text: </label>
    <input type="text" autocomplete="off" id="line1" placeholder="line2"><br>
    <label for="line3">Enter your text: </label>
    <input type="text" autocomplete="off" id="line1" placeholder="line3"><br>

    //Click the "click-me' button to return the text on the "HTML" button 
    <button onclick="myFunction()">Click me</button> 
  </form>
</div>

`myFunction` is out of scope. Inline event handlers like `onclick` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of registering events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Apr 05 '21 at 10:56
Thank you so much Sebastian, do you think you could explain how 'my function' is out of scope and where I should position it. — Tilda, Apr 05 '21 at 11:18

Rahul Mohabir · Accepted Answer · 2021-04-05T12:50:18.573

Try this. For the button, the element being displayed only stays if the user keep on holding the button. Thus I changed it to a radio box where you can style it into a button.

The button has been linked with the canva and the inserted in the different textbox are being displayed respectively.

Edit: I have added a reset code to reset the canva and also styled the two "buttons".

Tested and works

<canvas id="myCanvas" width="900" height="600" style="border:1px solid #404040;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>


    function myFunction() {
  var canvas = document.getElementById("myCanvas"); 
  var ctx = canvas.getContext("2d");
  var img =new Image(); 
 
  img.onload = function() {
   
    ctx.drawImage(img, 0, 0, 900, 600);

    }
    //the code below positions the overlaying text on the image
    ctx.font = "bold 36px Times";
    ctx.fillStyle = "black";
    ctx.fillText ( document.getElementById("line1").value ,400,325);
    ctx.fillText ( document.getElementById("line2").value ,400,375);
    ctx.fillText ( document.getElementById("line3").value ,400,425);
 


 }

  img.src= "images/image1.jpg"

function myFunction2() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
  }
  //this is the image 

</script>

 //the code below allows the user to input text into boxes

<div>
  <form>
    <label for="line1">Enter your text: </label>
    <input type="text" autocomplete="off" id="line1" placeholder="line1"><br>
    <label for="line2">Enter your text: </label>
    <input type="text" autocomplete="off" id="line2" placeholder="line2"><br>
    <label for="line3">Enter your text: </label>
    <input type="text" autocomplete="off" id="line3" placeholder="line3"><br>

    //Click the "click-me' button to return the text on the "HTML" button 
    <a id="input-button" onclick="myFunction()">Click me</a> 
    <a href="#" id="input-reset" onclick="myFunction2()">Reset</a> 
  </form>
</div>
<style>
#input-button {
    padding: 2em;
    background-color: black;
    color: #fff;

}   

#input-reset {
    padding: 2em;
    background-color: black;
    color: #fff;
    text-decoration: none;
}
 </style>

Rahul, My main issue is the displaying of the text of the text buttons in the fillText section. I'm really new to this, how can you tell that the text buttons and fillText are linked? Sorry if that's a dumb question. — Tilda, Apr 05 '21 at 11:40
Alright I got it now. See my edit, the text are also being displayed now respectively. — Rahul Mohabir, Apr 05 '21 at 11:49
Woohoo!!! The text has now been displayed! Unfortunately my picture has disappeared and I'll have to figure out how to remove text at end as it just overlays with each new entry, but I've been trying to do this for the last 4 days with no success, thank you!!!!!! — Tilda, Apr 05 '21 at 12:00
Do you know how I would reset the text, so it can be changed, preventing overlay? I really appreciate your help. — Tilda, Apr 05 '21 at 12:06
I just eddited the above code and added a reset button along with styling the click me and reset "button" which works fine. I'm glad to have solved your issue. :D Could you please mark the response as the answer please. — Rahul Mohabir, Apr 05 '21 at 12:52
Thank you, few sticky bugs but hopefully I can get it working. — Tilda, Apr 05 '21 at 12:58
Sure you will get it working. If there's any help needed do ask. Goodluck — Rahul Mohabir, Apr 05 '21 at 13:12

How can I get my function to display text over an image?

1 Answers1