Lossing quality of image when scaling drawImage (Dynamic Texture)

Questions
1

Hi Everyone,

I want to ask about drawImage scaling on babylon.js. I have a good quality image, but when I try to scaling that image, the quality is bad. Are there any suggestions for me to resolve the issue? I attach my screenshot and code below.

 // Logo Feature
var ctx = logoDynamic.getContext();
ctx.translate(90,310);
ctx.rotate(180*Math.PI/180);
logoDynamic.clear()
logoDynamic.getContext().clearRect(0, 0,300,300)

var img = new Image();
img.src = 'assets/logo/liv.png';
img.onload = function() {   
    ctx.drawImage(this ,0,0,25,25);	
    logoDynamic.update();
    logoMaterial.diffuseTexture = logoDynamic;
    logoMaterial.opacityTexture = logoDynamic;
}

Screenshot_65
Screenshot_65625×570 27.6 KB

2

This may be due to the CSS size/dpi of the canvas in relation to the screen.

I found this on an earlier topic (don’t remember where) that seemed to help in setting the canvas CSS which helped with my blurry images. You may want to call it on initialization as well as in a windowresize event.

Or I might be totally off of what you are saying.

fixDpi = () => {
const dpi = window.devicePixelRatio;
const styles = window.getComputedStyle(canvas);

// create a style object that returns width and height
const style = {
  height() {
    return +styles.height.slice(0, -2);
  },
  width() {
    return +styles.width.slice(0, -2);
  }
};

// set the correct canvas attributes for device dpi
canvas.setAttribute('width', (style.width() * dpi).toString());
canvas.setAttribute('height', (style.height() * dpi).toString());

}

2 Likes
3

Thank you so much, I just solve the problem :grinning: :grinning:

1 Like
4

Thank you so much! is so helpfull! :hugs: