kineticjs (HTML5 Canvas) - smoothing image when scaling down -

when add large images onto page kineticjs getting poor quality when setting them quite small sizes. result jagged/rough. if add same image , set dimensions img src better quality , smoothly scaled down version.

is there can add combat this? jsfiddle, screenshot , code below

jsfiddle: http://jsfiddle.net/vtlkn/6/

// define stage var stage = new kinetic.stage({     container: "canvas",     width: 300,     height: 200 });  //define layer images var layer = new kinetic.layer(); stage.add(layer);     // draw image function function drawimage(image,w,h,x,y) {      // define function's image properties     var theimage = new kinetic.image({         image: image,         x: x,         y: y,         width: w,         height: h     });      // add function's image layer     layer.add(theimage);     layer.draw(); }  // define image 1 , draw on load var image1 = new image(); image1.onload = function() {     drawimage( this, 250, 188, 0, 0); }; image1.src = "http://i.imgbox.com/vmfjlbnw.jpg"; 

well, based on comment @cryptoburner. implemented custom shape in kinetic , used scenefunc use drawimage function implemented in related link.

var theimage = new kinetic.shape({     scenefunc: function(context) {         /// step 1         var oc = document.createelement('canvas'),             octx = oc.getcontext('2d');         oc.width = image.width * 0.5;         oc.height = image.height * 0.5;         octx.drawimage(image, 0,0, oc.width,oc.height);          /// step 2         octx.drawimage(oc,0,0,oc.width * 0.5,oc.height * 0.5);            context.drawimage(oc,0,0,oc.width * 0.5, oc.height * 0.5,                          0,0,w,h);     } }); 

so here fiddle: http://jsfiddle.net/vtlkn/8/

now it's still not img version, , improvement. since image 1000 pixels wider, idea iteration of downsizing (in custom scenefunc.

ps. updated kinetic version 5.0.1, otherwise didn't work.