Tutorial Fabric.JS : Membuat Object Text di HTML 5 Canvas dengan Fabric.JS [docs/kuhomi.id].

Teknologi
Sabtu, 15 Juni 2024 | 14:03:38
Kuhomi.id

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

Belakangan ini, gua lagi suka untuk ngulik salah satu library javascript yang dapat membuat dan kustomisasi tag html canvas. Library javascript yang gua gunakan adalah Fabric.JS.

Fabric.JS adalah library open source javascript html 5 canvas. Dengan library ini, kita dapat membuat populasi object pada sebuah html canvas. Tidak sampai disitu, kita juga dapat generate dan unduh object yang telah kita buat tersebut menjadi sebuah image.

Fitur yang terdapat pada library Fabric.JS ini, menurut gua sangat lengkap. Selama gua coba library ini, menurut gua cara menggunakan Fabric.JS ini, cukup mudah, dokumentasinya cukup lengkap dan banyak forum tanya jawab yang membahas mengenai cara penggunaan Fabric.JS ini.

Nah, pada artikel kali ini, gua mau coba sharing ke kalian hasil percobaan gua menggunakan library ini. Adapun yang mau gua sharing kali ini adalah cara membuat object text ke dalam HTML Canvas menggunakan library FabricJS.

Oke, langsung aja ini dia full kodingannya.

<!DOCTYPE html>
<html>
    <head>
        <title>Tutorial Canvas FabricJS: Membuat Object Text dengan Textbox</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>
     
        <!-- 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">
            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">
                        <button class="btn btn-outline-secondary" id="add-text" title="Add Text" type="button">
                        Add Text
                        </button>
                      </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
                function text_instance()
                {
                    // 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: 'Arial', //font family text Arial
                        width: 180, //width textbox 180
                        editable: true //text dapat di kustomisasi
                    });
                    canvas.add(text);
                }

                //ketika tombol "add-text" di klik, buat object textbox
                $("#add-text").click(function(){
                    text_instance();
                });
            </script>
        </main>
    </body>
</html>

Untuk penjelasannya, gua coba jelaskan melalui komentar pada kode program ya. Semoga bermanfaat.