1

I'm creating a canvas element to place some Babylon content. I want that canvas to be full width and full height responsive. For that I used this JS:

$( window ).resize( function () {
  $('#canvas').css({
     "height": window.innerHeight,
     "width": window.innerWidth
  });
});

That works fine resizing the content, but the content is streatching itself when I resize the window.

How can I avoid that stretching?

enter image description here

enter image description here

ggorlen
  • 44,755
  • 7
  • 76
  • 106
Andrés García
  • 23
  • 5
  • 1
    Try to avoid using CSS to style a canvas. That changes the DOM element but the drawing pixels are unchanged resulting in distortions. Use JS to set properties `canvas.width = innerWidth` and height. Unrelated, but it's a good idea to debounce the resize event firing as well after you fix the stretching problem. – ggorlen Apr 23 '21 at 18:12
  • 1
    Thanks, that works! – Andrés García Apr 23 '21 at 19:29

0 Answers0