Home/ Questions/Q 9001675
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T00:28:05+00:00

I am having a small bug which seems to indicate that the onload function

  • 0

I am having a small bug which seems to indicate that the onload function is being called prior to the image being fully loaded, when you pass in image data as its source.

This is the HTML

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <canvas id='finalImage'></canvas>
</body>
</html>​

This is the javascript:

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var image = new Image();
image.onload = function() {
    // I've also put a console.log here at one point, and it does get called.
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
};
image.src = "data:image/jpeg;base64,/9j/4QNMR..."; // cut for sanity.

var outputCanvas = $("#finalImage")[0];
var outputContext = outputCanvas.getContext('2d');

// If I uncomment this line, the image is drawn.
//context.drawImage(image, 0, 0, canvas.width, canvas.height);

// If I change canvas to image, its also drawn, which means it is being loaded.
// But it seems to indicate to me that onload gets called too early.
outputContext.drawImage(canvas, 0, 0);​

Here is the link to the JSFiddle..

Let me know if you find what is wrong with it, been messing with it for quite a bit now.

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    outputContext.drawImage(canvas, 0, 0);​ calls before context.drawImage(image, 0, 0, canvas.width, canvas.height); to guarantee that outputContext is drawn to after canvas is to put it in the onload function

    var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var image = new Image();
var outputCanvas = $("#finalImage")[0];
var outputContext = outputCanvas.getContext('2d');
image.onload = function() {
    // I've also put a console.log here at one point, and it does get called.
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
    outputContext.drawImage(canvas, 0, 0);​
};
image.src = "data:image/jpeg;base64,/9j/4QNMR..."; // cut for sanity.

    http://jsfiddle.net/mowglisanu/ruKht/14/

    • 0