CODEWITHSUNDEEP
html
EddieC
EddieC

Reputation: 144

How do I load a bitmap file into HTML5's Canvas

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!

Upvotes: 4

Views: 9149

Answers (3)

EddieC
EddieC

Reputation: 144

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.

Upvotes: 2

GrandmasterB
GrandmasterB

Reputation: 3455

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

Upvotes: 0

Pekka
Pekka

Reputation: 449783

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.

Upvotes: 1

Related Questions