• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript My picture has disappeared and text overlays from display html function button in javascript ctx fillText.

Tilda

New Coder
Hi, I'm afraid this is probably very basic but I'm having a nightmare trying to fix it. After getting the input box to eventually display in the ctx fillText area and have now lost my image and the text overlays each time I type, any advice would be greatly appreciated.



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

<script>


JavaScript:
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);

  }

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

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

HTML:
<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

    <input type="radio" onclick="myFunction()">Click me</input>

  </form>

</div>
 
Last edited by a moderator:

LTomy

Active Coder
Staff Team
Guardian
Hi Tilda,

A rule of CodeForum is that you must use the BBcode feature when you post code! You simply click on the </> button, append the code and select the language!
 

Mangini

New Coder
I'd like to help you out but I just don't understand the end goal from what you've provided here. Can you setup something like a jsFiddle or Codepen so we can see it for ourselves?
 

BGB

Coder
Staff Team
Guardian
Did you try this,
JavaScript:
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 );
    }
            
    //this is the image
    img.src= "bus_red.gif"
}
 

Top