Using local images for texture?

Thanks guys for your advises and time, still a long way to go for me, I will work on that.

I tried to go around with this using img element anf drawing the image to a canvas and then use it like texture but once I use THREE.Texture or THREE.CanvasTexture doesn’t apply texture, this is my code…
Is something wrong with the codes?

ca=document.createElement("canvas");
  im=document.createElement("img");
    im.setAttribute("src","pan.jpg");
    document.body.appendChild(im);
ctx=ca.getContext("2d");

setTimeout(function(){
ca.setAttribute("width",im.naturalWidth);
ca.setAttribute("height",im.naturalHeight);
ctx.drawImage(im,0,0);
document.body.appendChild(ca);

//loads image right
			init();
			animate();

},100);
//   in init() function
var geometry = new THREE.BoxBufferGeometry( 200, 200, 20 );
 mat=new THREE.MeshBasicMaterial();
//mat.map = new THREE.Texture(ca);

mat.map = new THREE.CanvasTexture(ca);
var object = new THREE.Mesh( geometry, mat );
scene.add( object );
//  it shows a dark box...