CODEWITHSUNDEEP
canvasfabricjs
user3233074
user3233074

Reputation: 529

fabric canvas font style change after added

my intention is make the font change by selecting the font type on , how i going to make the font change instantly just by selecting.

my change font code:

//the font wont change getAcriveObject
    $(function() {
       $('#FontStyleNumber').change(function(){
        var cFont = $(this).val();
        var tObj = canvas.getActiveObject();
        tObj.set({fontFamily : cFont});
        canvas.renderAll();
        });
    });

jsfiddle: mylink

Upvotes: 2

Views: 2708

Answers (1)

invernomuto
invernomuto

Reputation: 10211

You should include all your script inside jquery onload:

Your fixed example

Try yourself in the snippet below if the solution fit for you:

$(function() {
  var canvas = new fabric.Canvas('textCanvas');

  var textObj1 = new fabric.Text('font test', {
    left: 100,
    top: 100,
    fontSize: 30,
    fill: "#FF0000" // Set text color to red
  });

  canvas.add(textObj1);
  $('#FontStyleNumber').change(function() {
    
    var mFont = $(this).val();
    var tObj = canvas.getActiveObject();
    tObj.set({
      fontFamily: mFont
    });
    canvas.renderAll();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Select Font:</label>
<select name="FontStyleNumber" id="FontStyleNumber">
  <option value="Times New Roman">Times New Roman</option>
  <option value="Arial">Arial</option>
  <option value="Georgia">Georgia</option>
  <option value="Hammersmith One">Hammersmith One</option>
  <option value="Pacifico">Pacifico</option>
  <option value="Anton">Anton</option>
  <option value="Sigmar One">Sigmar One</option>
  <option value="Righteous">Righteous</option>
</select>
<div class="textcanvas_warpper">
  <canvas id="textCanvas" width="500" height="500" style="border: 1px solid black; margin-left:50px; margin-top:35px; z-index:1;"></canvas>
</div>

Upvotes: 5

Related Questions