tags:

views:

33

answers:

3

I am trying to load a bitmap into the canvas following the example here.

Here is my code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>HTML 5 Reports</title>
    <script type="text/javascript">
     function draw() {  
      var ctx = document.getElementById('canvas').getContext('2d');  
      var img = new Image();  
      img.onload = function(){  
       ctx.drawImage(img,0,0);  
       ctx.beginPath();  
       ctx.moveTo(30,96);  
       ctx.lineTo(70,66);  
       ctx.lineTo(103,76);  
       ctx.lineTo(170,15);  
       ctx.stroke();       }  
      img.src = 'worldmap1.bmp';  
    }  
    </script>
</head>
<body onload="draw()">
    <canvas id="graph"></canvas>
</body>
</html>

Nothing is drawn in the browser when I view the page. No Errors Given. Please tell me what I am doing wrong. Thanks!

+1  A: 

I have no experience with Canvas, but I would be surprised if BMP files were supported... Try a JPG, PNG or GIF file, those are reliably supported across all browsers.

Pekka
Now I have tried it with both png and gif files, no luck. As it does not draw the lines either, I think its something more fundamental that I am doing wrong.
EddieC
A: 

If its not bitmap related per the other posts... are you sure img.src is a valid path to the file?

GrandmasterB
Well I tried a full path and it did not do any better. It does not draw the lines (that appear to be indicated in the code above) either.
EddieC
If I just insert the image into the html body using <img src="worldmap1.jpg"> it shows the image, so I do not think it is path related.
EddieC
A: 

I guess I should answer this question so I can close it. That is what it seems to say on meta.stackoverflow.com

Ok I forgot the semi-colon after draw(); and canvas id needs to be "canvas" instead of "graph". Solved my own problem =) I feel smart now =) Thanks for the help all. – EddieC 2 mins ago edit.

EddieC