Fabric js: Modify Rectangle Height and Width with Values Insertion

Question

I want to change the rectangle measures, with the values ​​entered in the form Height and Width. But the function recalculate(inputWidth, inputHeight) fails. Can anyone help me ?

Here is my html code:

<div class="row">
<div class="col-sm-3">
    <form>
        <div class="form-group">
            <label for="inputHeight">Height</label>
            <input type="text" name="inputHeight" class="form-control">
        </div>
        <div class="form-group">
            <label for="inputWidth">Width</label>
            <input type="text" name="inputWidth" class="form-control">
        </div>
        <button onclick="recalculate(inputWidth, inputHeight)" type="submit" class="btn btn-primary squareP">Modify Rectangle</button>
        <button type="button" class="btn btn-primary square">Rectangle</button>
    </form>
</div>
<div class="col-sm-9">
    <canvas id="myCanvas"></canvas>
</div>

Here is javascript:

var canvas = new fabric.Canvas('myCanvas', {
    width: window.innerWidth,
    height: window.innerWidth - 50,
    isDrawingMode: false,
    backgroundColor: '#fff'
});

document.querySelectorAll('.square')[0].addEventListener('click', function() {
    var rect = new fabric.Rect({
        top: 100,
        left: 100,
        width: 100,
        height: 100,
        fill: '',
        selection: false,
        fill: '#f55'
    });
    canvas.add(rect);
});

document.body.querySelectorAll('.squareP')[0].addEventListener('click', function recalculate(inputWidth, inputHeight) {
    var obj = canvas.getActiveObject();
    obj.set('width', inputWidth).set('height', inputHeight);
    obj.set({width: inputWidth.value, height: inputHeight.value});
    obj.setCoords();
    canvas.renderAll();
});

Answer 1

There is a solution :jsfiddle

First in your HTML you have to remove the form tag because form expect a post attribute to work and you don't need it. Then remove the args of your function, we will get it with JQuery.

    <div class="row">
<div class="col-sm-3">
        <div class="form-group">
            <label for="inputHeight">Height</label>
            <input type="text" name="inputHeight" class="form-control">
        </div>
        <div class="form-group">
            <label for="inputWidth">Width</label>
            <input type="text" name="inputWidth" class="form-control">
        </div>
        <button onclick="recalculate()" type="submit" class="btn btn-primary squareP">Modify Rectangle</button>
        <button type="button" class="btn btn-primary square">Rectangle</button>
</div>
<div class="col-sm-9">
    <canvas id="myCanvas"></canvas>
</div>

Then in your JS get the field vlue and update your dimensions :

var canvas = new fabric.Canvas('myCanvas', {
    width: window.innerWidth,
    height: window.innerWidth - 50,
    isDrawingMode: false,
    backgroundColor: '#fff'
});

document.querySelectorAll('.square')[0].addEventListener('click', function() {
    var rect = new fabric.Rect({
        top: 100,
        left: 100,
        width: 100,
        height: 100,
        fill: '',
        selection: false,
        fill: '#f55'
    });
    canvas.add(rect);
});

document.body.querySelectorAll('.squareP')[0].addEventListener('click', function recalculate() {
    var obj = canvas.getActiveObject();
    var w = $("input[name='inputWidth']").val();
    var h = $("input[name='inputHeight']").val();
    obj.set('width', w).set('height', h);
    obj.setCoords();
    canvas.renderAll();
});

Note that when you edit object height and width you don't change border position (check that on the fiddle). It's better to use scale if you want this behaviour.