Tips on preventing the expansion of padding borders when adjusting the size of an object in FabricJS?

Is there a way to prevent the increase in control border padding when scaling an object on FabricJS?

I currently have a rectangle

canvas = new fabric.Canvas('c', {
                backgroundColor: '#FFFFFF'
});

// creating a rectangle object
var rect = new fabric.Rect({
  left: 200,
  top: 185,
  fill: 'red',
  width: 100,
  height: 100,
  padding: 0
});

https://jsfiddle.net/wwexsh1f/2/

Scaled Rectangle Image

Even though I set the padding to 0, when I scale my rectangle using the mouse or the rect.scaleTo function, the control border paddling increases. Is there a method to prevent this padding increase during scaling?

Answer №1

Define strokeWidth as 0;

const square = new fabric.Rect({
  x: 200,
  y: 185,
  fill: 'red',
  width: 100,
  height: 100,
  padding: 0,
  strokeWidth: 0
});

This shape will resize proportionally with the object

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Material-UI Nested Checkbox causing parent DOM to not update upon selection changes

Currently, I am integrating a nested checkbox feature from a working example into my application. The functionality of the checkboxes covers seven different scenarios: - Scenario - No children, no parent selected - Select the parent -> select both pa ...

Creating a new JSON by extracting a specific branch or node from an existing JSON data

I have a Nuki Smartlock and when I make two API calls to the Nuki Bridge, I receive JSON responses. I want to apply the same logic to both responses: When requesting for current states, the JSON looks like this: [{ "deviceType": 0, "nuk ...

Effortlessly sending information to the Material UI 'Table' element within a ReactJS application

I have integrated a materialUI built-in component to display data on my website. While the code closely resembles examples from the MaterialUI API site, I have customized it for my specific use case with five labeled columns. You can view my code below: h ...

Issues with AJAX requests failing to fire with the latest version of jQuery

A small script I have checks the availability of a username in the database, displaying "taken" if it's already taken and "available" if it's not. The code below works perfectly with jQuery v1.7.2. However, I need to update it for jQuery v3.2.1. ...

Execute the script when the document is fully loaded

Is there a way to show a dialog in jQuery when the document loads without using <body onload="showdialog();">? Can the javascript code be placed in the main div or footer div to work like the onload event? <body onload="$('#dialog').sli ...

Is there a way to reach a different function within the value of the react Context.Provider?

Right now, I am learning how to utilize the react context API. Within my react Provider class, I have some state data and functions stored in the value={}. But I am curious, how can I call a function inside this value from another function within the same ...

Utilizing Vue.js for Tabs in Laravel 5.8

I am encountering an issue in Laravel while attempting to set up a Vue instance for tabs. Currently, only Tab 1 and Tab 2 are displayed without any content, and the tabs themselves are not clickable links. Could this problem be related to how I am calling ...

When the onclick event is triggered, the return value will execute after the onclient

After my onclientclick event finishes, I am trying to run my onclick event. However, regardless of whether my checkbox is selected or not, the program keeps prompting me to "Please select at least one to delete." Can anyone help me figure out why this is h ...

Tips for retrieving return values from AJAX URL content

As I am writing some code to send data from one page to another through the ajax URL, I encountered an issue where the retrieved values on the previous page are showing as null. The first page code looks like this: <script> function myFunction() { ...

Changing the value of one particular key within an object during a reduce operation will impact all other keys within the object as well

I'm completely lost here. It seems like there's a reference issue causing all data properties to be overwritten with the value of the last row. I need help figuring out how to iterate over a list of objects, using specific keys to assign data to ...

What is the best method for retrieving information from Google Firestore and integrating it into my Vue component?

In the process of creating a game lobby where one player initiates a game and waits for another player to join. Once the second player joins, the Firestore document containing information about the game is updated with the player's name stored in the ...

What steps should be taken to refresh a page following an AJAX file upload?

I need some help creating a progress bar to track file uploads on my website. Here's what I have so far: HTML: <form action="upload/files.php" method="post" enctype="multipart/form-data" id="frmUpload"> <input type="file" name="upfile" ...

The function "Jest spyOn" does not exist

I’m currently facing an unfamiliar error while testing my React component using Jest. Here’s the code snippet for my <Row/> component: In my Row component, there are various methods like showDetailsPanel(), handleStatusChange(), handleModalCanc ...

Is the navigation taking priority over all other content and adapting responsively alongside it?

My current project involves a responsive navigation, which is functioning properly. However, I am facing an issue with the content not aligning correctly under the navigation bar. I am struggling to find a solution to this problem. If you would like to rev ...

The combination of Node.js module.exports and shorthand ternary operators for conditional statements

Can you explain the purpose of this line 'undefined' != typeof User ? User : module.exports and why is everything enclosed within (function(){})? I am having trouble understanding its significance. This code snippet is extracted from a library f ...

The Materialize CSS tabs are aligning vertically below each other, but functioning correctly upon refreshing the page

When using materialize css tabs, all the divs load one below the other on the initial page load. If I refresh the page, it starts behaving properly. <div class="row"> <div class="col s12"> <ul class="tabs"> <li class="tab col s ...

Error: Module 'electron-prebuilt' not found

I am encountering an issue with my Electron app that utilizes Nightmare.js after compiling it into an .exe file using electron-packager. Everything functions properly until I click a button that triggers Nightmare.js, at which point I receive the followi ...

Angular popup refusing to close (forcing $scopes to communicate)

I have encountered an issue with a simple angular modal that is triggered using angular ui.bootstrap. The modal opens successfully, passes values, but struggles to close or cancel. I suspect it might be an issue with the $scopes not communicating effective ...

Accessing Data from the Wikipedia API

After receiving a JSON response with the following structure: { "batchcomplete": "", "query": { "pages": { "97646": { "pageid": 97646, "ns": 0, "title": "Die Hard", "extract": "Die Hard is a 1988 ...

Creating a callback in C code with Emscripten for JavaScript integration

In this challenge, the goal is to incorporate a JavaScript function as a callback to display progress during a while-loop operation. For example: var my_js_fn = function(curstate, maxstate){//int variables console.log(curstate.toString() + " of " + maxsta ...