Fabric.js: Initial position object outside canvas no longer working - fabricjs

Question

Recently I have started to use a newer version of Fabric.js (from 1.7.22 to 2.3.5). I had to make a few modifications to existing code that seem logical to me. However, I notice that you cannot initially place an object outside the canvas anymore, to reposition it later onto the canvas. Like in the code below. It won't show. My question is: has this changed for some reason, or is this an issue (bug)? And do I have other options than postpone adding the object to the canvas, or using the visible attribute?
$( document ).ready(() => {
const canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
left: 301,
top: 10,
originX: 'left',
originY: 'top',
width: 50,
height: 50,
fill: '#336699'
});
canvas.add(rect);
rect.set({"left": 10});
rect.set({"top": 10});
canvas.renderAll();
});
canvas {
border: 1px solid tomato;
}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.5/fabric.min.js"></script>
<canvas id="canvas" width="300" height="100"></canvas>

Answer 1

You need to use setCoords() after repositioning.
$( document ).ready(() => {
const canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
left: 301,
top: 10,
originX: 'left',
originY: 'top',
width: 50,
height: 50,
fill: '#336699'
});
canvas.add(rect);
rect.set({"left": 10});
rect.set({"top": 10});
rect.setCoords();
canvas.renderAll();
});
canvas {
border: 1px solid tomato;
}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.5/fabric.min.js"></script>
<canvas id="canvas" width="300" height="100"></canvas>