Home > DeveloperSection > Forums > HTML5 Canvas - How to draw rectangle over image in canvas
ben reitman
ben reitman

Total Post:96

Points:676
Posted on    December-31-2014 11:08 PM

 .NET JQuery  JavaScript  HTML  HTML5  HTML5 Canvas 
Ratings:


 1 Reply(s)
 774  View(s)
Rate this:
 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 using 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>  


Alex Leblois
Alex Leblois

Total Post:67

Points:471
Posted on    December-31-2014 11:27 PM

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

<script>
window.onload = function() {
  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>
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.

Don't want to miss updates? Please click the below button!

Follow MindStick