CODEWITHSUNDEEP
javascripthtmlcanvasdrawimage
user3150635
user3150635

Reputation: 547

Why doesn't context.drawImage() work in html canvas?

I'm trying to put the image file "sticky.png" into a canvas box, but all I'm getting is a blank canvas. Can anyone point out what I'm doing wrong and/or give me code that works?

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

<body>

<script>

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var sticky = new Image();
sticky.onload = function() {
context.drawImage(sticky, 0, 0);
sticky.src = "sticky.png";
};


</script>

</body>

Upvotes: 2

Views: 10836

Answers (2)

Shreyder
Shreyder

Reputation: 25

sometimes as a workAround we have to load the image before the canvas. It's very unusual, but it WORKS. And then you just hide the image. Don't forget to use setTimeOut to wait till image is loaded!

setTimeout("paintStar()", 2000);

function paintStar() {
    var canva3 = document.getElementById('canvas3');
    canva3.width = 640;
    canva3.height = 480;
    var ct3 = canva3.getContext('2d');
    var img = new Image();
    img.src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3DlDGTyfaFMtUf9GYykLglqfS8GzHbeKRV5vDfHraV1ihNIYo';

    ct3.drawImage(img, 0, 0);
    ct3.drawImage(img, 0, 0, 20, 20, 10, 200, 20, 20);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CANVAS</title>
    <style>
        .canvas-1 {
            width: 640px;
            height: 480px;
            border: 1px solid #777;
            
        }
        .img-1 {
            display: none;
        }

    </style>
    <script src="canva3.js" defer></script>
</head>

<body>
<div class="img-1"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3DlDGTyfaFMtUf9GYykLglqfS8GzHbeKRV5vDfHraV1ihNIYo" alt=""></div>
<canvas id="canvas3" style="border: 2px solid #444;">Doesn't work!</canvas>

</body>

</html>

Upvotes: -1

Weafs.py
Weafs.py

Reputation: 22992

You need to include the sticky.src before sticky.onload.

<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var sticky = new Image();
sticky.src = "sticky.png";
sticky.onload = function() {
  context.drawImage(sticky, 0, 0);
};

</script>
</body>

Fiddle

Upvotes: 5

Related Questions