Как предотвратить масштабирование содержимого при изменении размера элемента холста при использовании Fabricjs

Пожалуйста, помогите мне, как сохранить размер содержимого при изменении размера холста?
Пожалуйста, посмотрите этот код:
https://jsfiddle.net/thobn24h/79Ls6fry/7/
когда я изменяю размер окон, прямоугольник и текст масштабируются и имеют сглаживание. Как сделать так, чтобы они были одинакового размера с оригиналом и не имели алиасинга?
(кстати, почему в первый раз размер холста не равен размеру div?)

Спасибо!

<style>
        #canvasContainer {
            width: 100%;
            height: 100vh;
            background-color: gray;
        }
    </style>

<div id = "canvasContainer">
        <canvas id = "editorCanvas"></canvas>
    </div>

    <script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.js"></script>

    <script>
        $(function() {

            var canvasObject = document.getElementById("editorCanvas");
            // set canvas equal size with div
            $(canvasObject).width($("#canvasContainer").width());
            $(canvasObject).height($("#canvasContainer").height());

            console.info("width: " + $(canvasObject).width());
            console.info("height: " + $(canvasObject).height());

            canvas = new fabric.Canvas('editorCanvas', {
                backgroundColor: 'white',
                selectionColor: 'blue',
                selectionLineWidth: 2
            });

            // create a rectangle object
            var rect = new fabric.Rect({
              left: 10,
              top: 10,
              fill: 'red',
              width: 150,
              height: 150
            });

            rect.set({
                transparentCorners: false,
                rotatingPointOffset: 40,
                cornerColor: 'black',
                cornerStrokeColor: 'black',
                borderColor: 'black',
                cornerSize: 12,
                padding: 10,
                cornerStyle: 'circle',
                borderDashArray: [3, 3]
              });

            // "add" rectangle onto canvas
            canvas.add(rect);

            var text = new fabric.Text('hello world', { left: 10, top: 10 });
            canvas.add(text);

            // Tracking resize windows event
            window.addEventListener('resize', resizeCanvas, false);

        });

        function resizeCanvas() {

            var canvasObject = document.getElementById("editorCanvas");

            $(canvasObject).width($("#canvasContainer").width());
            $(canvasObject).height($("#canvasContainer").height());

            console.info("width: " + $(canvasObject).width());
            console.info("height: " + $(canvasObject).height());

        }