javascript - Adding transparent space to PNG for 3d -

i've got problem have resize images power of 2 load three.js. i've using following resize them:

            var w = powerof2down(this.width);             var scale = w / this.width;             var scaledheight = this.height * scale;             var h = powerof2up(scaledheight);              var scalefactor  =  ( this.width / w) * ( this.height / h ) * 0.1;             photo.scale.normalize().multiplyscalar(scalefactor);   function powerof2down(value) {     if(value < 80)          return 64;     else if(value < 150)          return 128;     else if(value < 400)          return 256;     else if(value < 800)         return 512;      return 1024; }   function powerof2up(value) {     if(value <= 64)          return 64;     else if(value <= 128)          return 128;     else if(value <= 256)          return 256;     else if(value <= 512)         return 512;      return 1024; } 

this works in places, scales much. i'm wondering adding white space smallest side rather scaling might control better.

is possible in canvas , add transparent space png?

edit

is right approach scaling images power of 2 , retaining aspect ratio?

what i'm looking think opposite automatically crop html5 canvas contents

going wrong way. didn't need resize both aspects, 1 do