Question

58

HTML5 Canvas - How to draw rectangle over image in canvas

rated 0 times [ 60] [ 2] / answers: 1 / hits: 61376 / 10 Years ago, thu, november 13, 2014, 12:00:00

Actually, I am able to do it using img.onload function. Something I got from 'HTML5 Canvas - How to Draw a line over an image background?'. But I need to draw image without using img from onload function which is like this:

    var imagePaper = new Image();





        imagePaper.onload = function(){





            context.drawImage(imagePaper,100, 20, 500,500);

        };



      imagePaper.src = images/main_timerand3papers.png;

}

But I want to able draw rectangle over canvas simply attaching img src above canvas, just as:

<body>  

<img id=scream src=my.jpg alt=The Scream width=220 height=277>



<p>Canvas:</p>

<canvas id=myCanvas width=500 height=500 >

Your browser does not support the HTML5 canvas tag.</canvas>

But I'm unable to draw line over img in canvas, either img is drawing or shape is hiding behind. This is my full code:

 <!DOCTYPE html>  

 <head>  

 <title>Playing YouTube video on HTML5 canvas</title>  

 <meta name=viewport content=user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width />  

 <style type=text/css>  

body {

        margin: 0px;

        padding: 0px;

      } 

 </style>  

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>



 </head>  

 <body>  

<img id=scream src=my.jpg alt=The Scream width=220 height=277>



<p>Canvas:</p>

<canvas id=myCanvas width=500 height=500 >

Your browser does not support the HTML5 canvas tag.</canvas>

  <script>  

var c=document.getElementById(myCanvas);

var ctx=c.getContext(2d);

var img=document.getElementById(scream);

ctx.drawImage(img,10,10);  

var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');



      context.beginPath();

      context.rect(188, 50, 200, 100);

      context.fillStyle = 'yellow';

      context.fill();

      context.lineWidth = 7;

      context.strokeStyle = 'black';

      context.stroke();

  </script>  

 </body>  

 </html>

Answers

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

jennie

Add To Favorites

Follow

Total Points: 593

Total Questions: 102

Total Answers: 106

Location: Federated States of Micronesia

Member since Fri, Sep 16, 2022

2 Years ago

jennie questions

1 Is there a React equivalent of Vue's nextTick() function?

Tue, Jun 21, 22, 00:00, 2 Years ago

1 how to loop to expect a list of item in jest

Tue, Feb 8, 22, 00:00, 2 Years ago

1 arrow function expected no return value with clean-up function in useEffect

Sun, May 23, 21, 00:00, 3 Years ago

1 React Re-Render Causes Flickering : How can i fix this?

Thu, Mar 4, 21, 00:00, 3 Years ago

1 React onChange not working for input inside functional component

Thu, Feb 25, 21, 00:00, 3 Years ago

View All

answered 10 Years ago jeremiahianx · Accepted Answer

Because you are not waiting for the image to load first. In your script add an window.onload()

<script>

window.onload = function() {

  var canvas = document.getElementById('myCanvas');

  var context = canvas.getContext('2d');

  var img = document.getElementById('scream');



  context.drawImage(img, 10, 10);



  context.beginPath();

  context.rect(188, 50, 200, 100);

  context.fillStyle = 'yellow';

  context.fill();

  context.lineWidth = 7;

  context.strokeStyle = 'black';

  context.stroke();

}

</script>

What is happening is it's trying to draw the image before it loaded, doing window.onload will call the code once the entire document is loaded (such as images). Otherwise it may display no image or draw it out of line.