Stuck in javascript of closing a limbo frame until my brains turn to scrambled eggs
EDIT : I found something that works on every page load other than the first (hard) load. This is weird advice to make it work because it doesn't use onload. For example.
This works with loads of 2 ... n:
case String:
var img = new Image();
img.onload = function() {
//context.drawImage(img,0,0);
};
img.src = detail;
context.drawImage(img,0,0);
This does not work at any load 1 ... n:
case String:
var img = new Image();
img.onload = function() {
context.drawImage(img,0,0);
};
img.src = detail;
//context.drawImage(img,0,0);
I'm not very happy with missing the most important load (first), but at least there is some progress.
Can anyone help me explain what is going on here? I'm really puzzled. I want the image to be loaded and drawn to the canvas every time. Is this an unrealistic expectation?
I am using FF 7.0.1 on Ubuntu, my user agent is Mozilla / 5.0 (X11; Linux i686; rv: 7.0.1). Gecko / 20100101 Firefox / 7.0.1
EDIT : Still fails when all approaches try in the comments. I will think about it. I think it has something to do with the canvas, which is no longer available (although the variable is resolved correctly and there is no error in the JS Debugger in FF).
I am writing a js framework for rendering to canvas to provide a simple API for writing a GUI with less code and prettier code than using the Canvas API. It's just a wrapper around the canvas. But I am not a js expert, although I love js, now it doesn't matter.
The following code in the closure can execute and access the scope of the img variable, can raise an alert form that covers the image loading area, can change the img css style properties, but will not execute drawImage in the context of the canvas to the context variable.
Before the closure, the context.fillRect will work fine, but inside the closure it doesn't. I think there is something fundamental that I haven't learned yet, as I have coded a similar load with a closure looking at the code before and everything just worked. Hopefully today is the day that I will learn something new.
RenderProvider.prototype.drawImage = function(srcElement,context,state,detail) {
if(detail == undefined || detail == null) {
alert("Image is not present. Ignoring.");
return;
}
switch(detail.constructor) {
case String:
alert("Image is from String");
var img = new Image();
img.src = detail;//'t.jpg';//'Star-Field.gif';//http://www.google.com/favicon.ico';
img.onload = function (e) {
alert('Drawing ' + img + ' to ' + context);
alert('Context dim ' + context.canvas.width + ',' + context.canvas.height );
context.drawImage(img,20,20);
return true;
};
img.src = detail;//'t.jpg';//'Star-Field.gif';//'http://www.google.com/favicon.ico';
break;
source to share
I made a jsfiddle that works if you want to play around with it.
var img = new Image();
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
img.src = 'http://www.google.com/favicon.ico';
img.onload = function() {
context.drawImage(this, 20, 20);
}
Note that I am using this
instead img
inside the callback function. img
works too, but is more familiar to use this
. Alternatively, you can, but img.src = ...
after defining the callback function and it still works.
source to share