fabric.js setControlsVisibility example

Hide the aspect-ratio changing handles on fabric.js objects.

by Arjan Haverkamp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/451/fabric.min.js"></script>
<button id="selectrectangle" type="button">Select rectangle</button>
<button id="selectcircle" type="button">Select circle</button>
<canvas id="canvas" width="400" height="400" style="border:1px solid red"/>

JavaScript

const canvas = new fabric.Canvas('canvas');

const rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 75,
  height: 50,
  fill: 'green',
  stroke: 'black',
  strokeWidth: 3,
  padding: 10
});
  
rect.setControlsVisibility({
	mt: false,
	mb: false,
	ml: false,
	mr: false,
	//mtr: false
});

canvas.add(rect);

const circle = new fabric.Circle({
	left: 200,
	top: 200,
	radius: 30,
	fill: 'gray',
	stroke: 'black',
	strokeWidth: 3
});

circle.setControlsVisibility({
	mt: false,
	mb: false,
	ml: false,
	mr: false,
	//mtr: false
});

canvas.add(circle);

$("#selectrectangle").click(() => {
	canvas.setActiveObject(rect).requestRenderAll();
});

$("#selectcircle").click(() => {
	canvas.setActiveObject(circle).requestRenderAll();
});