Resize canvas maintaining proportions of content, avoid stretching

Question

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?