We Keep Coding

javascript image object not work in chromica

I want to get width of an external image with javascript.
I try this code :
var image = new Image();
image.src = "1.jpg";
alert(image.width);
but it get image width in firefox and get 0 in chrome.
why it not work in chromica?

Try
image.onload = function() {alert(this.width);}

You're trying to get the width before the image has been downloaded. You have to wait, e.g.:
var image = new Image();
image.onload = function() {
alert(image.width);
};
image.src = "1.jpg";
Note that it's important to hook onload before you set src, because otherwise you have a race condition. Even though JavaScript is single-threaded on browsers (unless you use web workers), the browser is not. It can fire the load event as soon as you set src and, seeing no handlers, not queue them for callback.

Graphics BitMapFill TypeError

I'm working with the easeljs javascript to make a sort of game.
I'm using this example: http://www.createjs.com/#!/EaselJS/demos/game
As you can see there are spacerocks. This are graphics objects:
this.graphics.beginStroke("#FFFFFF");
I would like to fill the background with an image like this:
var bitmap = new createjs.Bitmap("http://nielsvroman.be/twitter/root/easeljs/image.png");
this.graphics.beginBitmapFill(bitmap, "no-repeat");
But I always get this error:
Uncaught TypeError: Type error
Does anybody know what I'm doing wrong?

Use a reference to an HTML Image, and not a Bitmap instance.
var image = new Image();
image.srce = "http://nielsvroman.be/twitter/root/easeljs/image.png";
this.graphics.beginBitmapFill(image, "no-repeat");
Note that you have to ensure the image is loaded, otherwise it may not show up on the first stage update. You can either tick the stage, or listen for image onload, and refresh the stage then.
image.onload = function() {
stage.update();
}

Using drawImage in HTML5

Fact : The following code is valid.
var img = new Image();
img.onload = function() {
context.drawImage(img, 32, 32);
};
img.src = "example.png";
First Observation : The following will not draw to canvas.
var img = new Image();
img.src = "example.png";
context.drawImage(img, 32, 32);
Second Observation : The following will draw to canvas (eventually)...
var img = new Image();
img.src = "example.png";
setInterval(function() {context.drawImage(img, 32, 32);}, 1000);
Why is it that I need to call the drawImage function on a callback? And if that is the case, why does it eventually work when nested in a setInterval function?

When you set the src of the image object, the browser starts to download it. But you may or may not get that image loaded by the time the browser executes the next line of code. That's why you are drawing a "blank" image, because it ain't loaded just yet.
You need to place an onload handler to know when the image has finished loading. Only then will you draw it to the canvas:
var img = new Image(); //create image object
img.onload = function(){ //create our handler
context.drawImage(img, 32, 32); //when image finishes loading, draw it
}
img.src = "example.png"; //load 'em up!

You can only draw the image to canvas after it's loaded, that's why it works when you do it from the onload callback. And it works with setInterval because, after a certain amount of time, it eventually gets fully loaded.

I believe its because loading an image is not instant, it takes time. Once the image is loaded, then it can be drawn to the canvas

This is needed because the browser needs to "read" and eventually download the image (onload event) to correctly handle the image load. Using a setInterval to simulate this behaviour could not work, for example loading of a large image on a slow connection...
So the best way to do this is:
var img = new Image():
img.src = "image.jpeg";
img.onload = function() {
// Now you can play with your image.
}

Does 'new Image()' allow for use of cache (JavaScript)

If I use new Image() to load up an image in JavaScript, will it use a cached version if possible, or will it always load up a fresh copy?
var imgObj = new Image();
imgObj.src = 'http://...';
imgObj.onload = function (loadedImg) { }

One thing to note is that if you want onload to always happen (even when it's in cache) you should define onload before src.
var imgObj = new Image();
imgObj.onload = function (loadedImg) { }
imgObj.src = 'http://...';

It'll load from cache if it's there, the same way a <img> in your markup would.

You can force a reload by adding a bogus query string argument. If your statement assigning a URL to the src property of the image is
imgObj.src = 'http://www.mySite.com/images/anImage.png';
you could render it as
imgObj.src = 'http://www.mySite.com/images/anImage.png?foo=0';
Just understand that on subsequent loads it will still use the cached copy unless you change the query string argument.

Canvas drawImage using data URL

I'll start with the script:
function saveInstance() {
_savedInstance = document.getElementById('canvasID').toDataURL();
}
function restoreInstance() {
ctx.drawImage(_savedInstance,0,0);
}
The purpose is to save an instance of the canvas and re-apply it later [Similar to how ctx.save() saves the style and transformations].
However, I got the error that says incompatible types (Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17). Is there any canvas method that will allow me to use the data URL string to re-draw the instance?
**If there's a better way to implement this save/restore idea I have, that'd also be much appreciated.
-Firstmate

Yes, you can create an image element with its source as _savedInstance and then draw it to the canvas.
var img = new Image();
img.src = _savedInstance;
ctx.drawImage(img,0,0);