CODEWITHSUNDEEP
javascript
Arian Faurtosh
Arian Faurtosh

Reputation: 18531

Placing text over image, text and image not showing up

I am trying to make a preview checkout, where you can preview an item, with custom text over the image, but I can't even get the image or text to show. Here is my code I have so far... 

<html>
    <head>
       <script>
           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 = "12pt Arial";
                   context.fillText("My TEXT!", 20, 20);
               };
           imageObj.src = "http://images.google.com/intl/en_ALL/images/srpr/logo11w.png"; 
           };
       </script>
    </head>
    <body>
        <div id="myCanvas"></div>
    </body>
</html>

Upvotes: 0

Views: 52

Answers (1)

Ani
Ani

Reputation: 4523

You have to have canvas tag instead of div and give it height and width 

<canvas id="myCanvas"  width="578" height="400"></canvas>

Upvotes: 2

Related Questions