CODEWITHSUNDEEP
javascripthtmlcanvas
Prabhat Doongarwal
Prabhat Doongarwal

Reputation: 186

HTML canvas image is not showing

This is the code: 

<head>
    <title>Canvas</title>
</head>

<body>
    <canvas id="c" width="200" height="200">
    </canvas>

    <script>
        var c = document.querySelector("#c");
        var ctx = c.getContext("2d");

        var image = new Image();

        image.onLoad = function() {
            console.log("Loaded Image");
            ctx.drawImage(image, 0, 0, c.width, c.height);
        };

        image.src = "fry_fixed.jpg";
    </script>
</body>

Canvas is getting created. Image is not appearing. I tried to debug it and found that the onLoad function is not working. I can ensure you that image is in the same folder and the image name is correct. But i still can't figure out why the code is not working!!

Upvotes: 1

Views: 181

Answers (2)

somethinghere
somethinghere

Reputation: 17358

Use onload instead of onLoad. Or even better, use an event listener!

var c = document.querySelector("#c");
var ctx = c.getContext("2d");

var image = new Image();

// Better use addEventListener, to be honest.
// image.onload = function() {
//   ctx.drawImage(image, 0, 0, c.width, c.height);
// };

image.addEventListener('load', function(){
  ctx.drawImage(image, 0, 0, c.width, c.height);
}, false)

image.src = "http://placehold.it/200x200";
<canvas id="c" width="200" height="200"></canvas>

Upvotes: 1

adeneo
adeneo

Reputation: 318342

case matters, it's onload, all lowercase, not onLoad

image.onload = function() {...

or the more modern addEventListener

image.addEventListener('load', function() {...}, false);

Upvotes: 2

Related Questions