Wrong object bounding when using viewportTransform

HTML

<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>


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

CSS

#canvasContainer {
            width: 100%;
            height: 100vh;
            background-color: gray;
        }

JavaScript

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

// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
 
canvas = new fabric.Canvas('editorCanvas', {
    backgroundColor: 'white',
    selectionLineWidth: 2,
    width: $("#canvasContainer").width(),
    height: $("#canvasContainer").height()
});

canvas.controlsAboveOverlay = true;

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

// Transform View
canvas.viewportTransform[4] = 200;
canvas.viewportTransform[5] = 200;
text.setCoords();
canvas.requestRenderAll();