How to put text on a background image which is on a canvas?

Question

I wanted to know how do I put text on top of the image which is in the canvas. The image needs to be in the canvas since it is part of my game (Breakout). I get some text but it goes behind the image which is annoying.

Code:

    <!DOCTYPE html>
    <html>

    <head>
        <title>Breakout</title>
    </head>

    <body bgcolor="#4d0000">

    <p align="center">
    <canvas id="canvas" width="1500" height="800" style="border:1px solid #d3d3d3;"></canvas>
    </p>

    <script>

    window.onload = function(){
     var canvas = document.getElementById("canvas");
     var context = canvas.getContext("2d");
     var imageObj = new Image();
     imageObj.onload = function(){
         context.drawImage(imageObj, 0, 0);
         context.font = "40pt Calibri";
         context.fillText("BREAKOUT", 625, 100);
     };
     imageObj.src = 'C:/Users/study/Desktop/Breakout/Images/test3.jpg'; 
};  



    </script>

    </body>
    </html>

What @FrankerZ said is the best answer. Another solution could be to set the `globalCompositeOperation` https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation to `destination-over` before drawing the image. — lemieuxster, Oct 08 '18 at 21:07
@Rolls_Reus_0wner Show your code. Did you perhaps put it after the `.onload()` and not within that function? — Blue, Oct 08 '18 at 21:09
@Rolls_Reus_0wner - it seemed to have worked for me? https://jsfiddle.net/uxe0ta3o/1/ Like FrankerZ said, it would be helpful to see your updated code. — lemieuxster, Oct 08 '18 at 21:30
@lemieuxster So that's how you do it, I did find another solution but I might use this. How do I put my updated code on here? Does it matter if that image is a background image or a normal image since I will be putting other features such as buttons on it? — Rolls_Reus_0wner, Oct 08 '18 at 21:37
I believe you can edit the post. If not, then providing a link in the comments would work. — lemieuxster, Oct 08 '18 at 21:40
@lemieuxster I edited the code so this is the solution I found. Is it ok? — Rolls_Reus_0wner, Oct 08 '18 at 21:42
Yes, I think that is what @FrankerZ meant when he said to change the order before. Good job! — lemieuxster, Oct 08 '18 at 21:43

chintuyadavsara · Answer 1 · 2018-10-09T06:59:37.333

There is no problem with the code you tried, it is not visible in the canvas because of the position of the text context.fillText("BREAKOUT", 625, 100);

So, just change the position of the text or increase the image size

This helps you Simulation background-size: cover in canvas

Now you can have your text wherever possible!

<!DOCTYPE html>
<html>

  <head>
    <title>Breakout</title>
  </head>

  <body bgcolor="#4d0000">

    <p align="center">
      <canvas id="canvas" width="1500" height="800" style="border:1px solid #d3d3d3;"></canvas>
    </p>

    <script>

      window.onload = function(){
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var imageObj = new Image();
        imageObj.onload = function(){
          context.drawImage(imageObj, 0, 0);
          context.font = "40pt Calibri";
          context.fillText("BREAKOUT", 20, 80, imageObj.width*2, imageObj.height * 2);

        };

        imageObj.src = 'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350'; 

      };  



    </script>

  </body>
</html>

Edit

Debug yourself whether the text is displaying before the image is loaded? So, if you have tried something like this

window.onload = function(){
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        context.font = "40pt Calibri";
        context.fillText("BREAKOUT", 620, 100);
        var imageObj = new Image();
        imageObj.onload = function(){
          context.drawImage(imageObj, 0, 0);
        };
        imageObj.src = 'C:/Users/study/Desktop/Breakout/Images/test3.jpg'; 
      };

The text won't be displayed! so just change the text position to something like context.fillText("BREAKOUT", 20, 80); and see, the text appears. So There is no problem with the code you have written.

Hope you got the answer to the question.

Thank you.

How to put text on a background image which is on a canvas?

1 Answers1