Question

168

How to write text on top of image in HTML5 canvas?

rated 0 times [ 169] [ 1] / answers: 1 / hits: 65850 / 13 Years ago, thu, december 8, 2011, 12:00:00

I want to display a image on canvas and insert a text on top of that image.

window.onload = function() {

    var canvas = document.getElementById(myCanvas);

    var context = canvas.getContext(2d);

    var imageObj = new Image();



    imageObj.onload = function() {

        context.drawImage(imageObj, 10, 10);

    };



    imageObj.src = darth-vader.jpg;

    context.font = 40pt Calibri;

    context.fillText(My TEXT!, 20, 20);

};

I'm getting only an image over here but not the text; the text is behind the image.
How to insert the text on top of the image?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

michaelashelbieh

Add To Favorites

Follow

Total Points: 303

Total Questions: 139

Total Answers: 97

Location: Suriname

Member since Sun, Oct 17, 2021

3 Years ago

michaelashelbieh questions

1 Nuxt 3 - resolver.resolveModule is not a function

Sat, Nov 13, 21, 00:00, 3 Years ago

1 .env file not updating in local environment in react js

Fri, Sep 17, 21, 00:00, 3 Years ago

1 How do i pass more things on getServerSideProps() in Next.js

Tue, Sep 14, 21, 00:00, 3 Years ago

1 TypeError: Cannot read property 'split' of undefined in discord and nodejs

Sun, Jan 17, 21, 00:00, 3 Years ago

1 Bootstrap Accordion rotate icon when open

Mon, Aug 31, 20, 00:00, 4 Years ago

View All

answered 13 Years ago marint · Accepted Answer

That is because you draw the text before the image has loaded and been drawn. You have to draw the text that should be on top of the image after the image is drawn. Try this code instead:

window.onload = function(){

     var canvas = document.getElementById(myCanvas);

     var context = canvas.getContext(2d);

     var imageObj = new Image();

     imageObj.onload = function(){

         context.drawImage(imageObj, 10, 10);

         context.font = 40pt Calibri;

         context.fillText(My TEXT!, 20, 20);

     };

     imageObj.src = darth-vader.jpg; 

};

Example:

enter