Pada artikel sebelumnya, gua sharing hasil coba coba menggunakan library Fabric.JS untuk membuat object text ke dalam HTML Canvas.

Untuk artikelnya, bisa kalian klik disini.

Tutorial Fabric.JS : Membuat Object Text di HTML 5 Canvas dengan Fabric.JS

Pada artikel gua kali ini, gua mau coba sharing lagi hasil coba coba menggunakan library Fabric.JS. Gua coba membuat fungsi untuk ubah font style daripada object text aktif yang telah gua tambahkan pada HTML Canvas.

Oke, langsung aja ke kodingannya.

Load library yang dibutuhkan. Pertama, kita akan load library javascript yang dibutuhkan. Pada artikel kali ini, selain load library Fabric.JS, gua juga akan menggunakan library javascript fontfaceobserver untuk load font style yang dipilih.

<!-- bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

        <!-- load script jquery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js" integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

        <!-- jquery ui -->
        <link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css' rel='stylesheet'>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

        <!-- fabric.js -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js" integrity="sha512-CeIsOAsgJnmevfCi2C7Zsyy6bQKi43utIjdA87Q0ZY84oDqnI0uwfM9+bKiIkI75lUeI00WG/+uJzOmuHlesMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

        <!-- fontfaceobserver -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.3.0/fontfaceobserver.standalone.js" integrity="sha512-AtGkQVw5dVZR8URiScMJF/O46VB5I4JRo+wsLSwCKvtnlCwlWV/59excjg1+hFmuXuQhwYvoADflVbN4fMAKNg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     
        <!-- script bootstrap.js -->
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>

Selanjutnya, kita akan load fontstyle yang ingin kita gunakan pada tag style. Atau kalian bisa juga load fontstyle melalui file CSS.

<style type="text/css">
            @import url('http://fonts.googleapis.com/css?family=Playwrite+ES+Deco|Roboto|Oswald|Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');
            canvas {
                border:1px solid #000000;
                position: absolute;
                width: 100%;
                height: 100%;
                overflow: hidden
            }
</style>

Setelah itu, kita siapkan tag HTML untuk view canvas dan dropdown select daftar pilihan font style. Berikut untuk kodingannya.

<div class="container">
 <div class="row">
  <div class="col-8">
   <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group me-2" role="group" aria-label="First group">
     <select class="" id="font-style">
      <option value="Oswald">Oswald</option>
      <option value="Playwrite ES Deco">Playwrite España Decorativa</option>
      <option value="Fontdiner Swanky">Fontdiner Swanky</option>
     </select>
    </div>
   </div>
  </div>
 </div>
 <canvas id="canvas"></canvas>
 <script type="text/javascript">
  // inisialisasi fabric js pada canvas
  var canvas = new fabric.Canvas("canvas");
  canvas.setDimensions({width:1280, height:720});
 </script>
</div>

Tahap terakhir, kita coba untuk koding script untuk handle proses ubah font style.

<script>
    // fungsi untuk membuat object text dengan fabric js
    $( document ).ready(function() {
        // membuat object textbox dengan fabric js
        // dengan default text "Text here", 
        var text = new fabric.Textbox('Text here', {
            fill: '#000000', //warna default text hitam
            fontFamily: 'Oswald', //font family text Arial
            width: 180, //width textbox 180
            editable: true //text dapat di kustomisasi
        });
        canvas.add(text);
    });

    //change font style:START
    $("#font-style").change(function(){
        var font = $(this).val();
        _load_font(font);
    });

    function _load_font(font) {
      var myfont = new FontFaceObserver(font)
      myfont.load()
        .then(function() {
          // ketika font berhasil di load, ubah font text canvas.
            canvas.getActiveObject().set("fontFamily", font);
            canvas.requestRenderAll();
        }).catch(function(e) {
            //tampilkan error dalam bentuk alert
            alert(e);
        });
    }
    //change font style:END
</script>

Berikut ini adalah full kodingannya.

<!DOCTYPE html>
<html>
    <head>
        <title>Tutorial Canvas FabricJS: Mengubah Font pada Text</title>
 
        <!-- bootstrap CDN -->
        <!-- bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

        <!-- load script jquery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js" integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

        <!-- jquery ui -->
        <link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css' rel='stylesheet'>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

        <!-- fabric.js -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js" integrity="sha512-CeIsOAsgJnmevfCi2C7Zsyy6bQKi43utIjdA87Q0ZY84oDqnI0uwfM9+bKiIkI75lUeI00WG/+uJzOmuHlesMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

        <!-- fontfaceobserver -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.3.0/fontfaceobserver.standalone.js" integrity="sha512-AtGkQVw5dVZR8URiScMJF/O46VB5I4JRo+wsLSwCKvtnlCwlWV/59excjg1+hFmuXuQhwYvoADflVbN4fMAKNg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     
        <!-- script bootstrap.js -->
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
        
        <!-- canvas style -->
        <style type="text/css">
            @import url('http://fonts.googleapis.com/css?family=Playwrite+ES+Deco|Roboto|Oswald|Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');
            canvas {
                border:1px solid #000000;
                position: absolute;
                width: 100%;
                height: 100%;
                overflow: hidden
            }
        </style>
    </head>
    <body class="py-4">
        <main>
            <div class="container">
                <div class="row">
                  <div class="col-8">
                    <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
                      <div class="btn-group me-2" role="group" aria-label="First group">
                        <select class="" id="font-style">
                            <option value="Oswald">Oswald</option>
                            <option value="Playwrite ES Deco">Playwrite España Decorativa</option>
                            <option value="Fontdiner Swanky">Fontdiner Swanky</option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
                <canvas id="canvas"></canvas>
                <script type="text/javascript">
                    // inisialisasi fabric js pada canvas
                    var canvas = new fabric.Canvas("canvas");
                    canvas.setDimensions({width:1280, height:720});
                </script>
            </div>
            <script>
                // fungsi untuk membuat object text dengan fabric js
                $( document ).ready(function() {
                    // membuat object textbox dengan fabric js
                    // dengan default text "Text here", 
                    var text = new fabric.Textbox('Text here', {
                        fill: '#000000', //warna default text hitam
                        fontFamily: 'Oswald', //font family text Arial
                        width: 180, //width textbox 180
                        editable: true //text dapat di kustomisasi
                    });
                    canvas.add(text);
                });

                //change font style:START
                $("#font-style").change(function(){
                    var font = $(this).val();
                    _load_font(font);
                });

                function _load_font(font) {
                  var myfont = new FontFaceObserver(font)
                  myfont.load()
                    .then(function() {
                      // ketika font berhasil di load, ubah font text canvas.
                        canvas.getActiveObject().set("fontFamily", font);
                        canvas.requestRenderAll();
                    }).catch(function(e) {
                        //tampilkan error dalam bentuk alert
                        alert(e);
                    });
                }
                //change font style:END
            </script>
        </main>
    </body>
</html>

Berikut adalah hasil implementasinya. Semoga bermanfaat