Skip Loading

[HTML5] Menulis teks pada canvas dengan custom fonts

Untuk menulis teks pada canvas, sangat mudah, cukup gunakan perintah context.fillText('text here', x, y), dimana x,y adalah koordinat pada canvas, dimana teks akan di tulis. contoh :

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

$(document).ready(function () {
   context.fillStyle = 'black';
   context.textBaseline = 'top';
   context.fillText('default font', 10, 100);
});

Secara default font yang digunakan adalah sans serif 10px. Untuk mengatur font, gunakan perintah:context.font = 'italic bold 40px Arial';

Untuk menggunakan custom font, caranya sama seperti kita menggunakan custom font untuk css, yaitu kita harus memanggil custom fonts terlebih dahulu melalui css. contoh:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: 
  url(../fonts/OpenSans-Light-webfont.woff) format('woff'),
  url(../fonts/OpenSans-Light-webfont.eot?#iefix) format('embedded-opentype'),
  url(../fonts/OpenSans-Light-webfont.ttf) format('truetype'),
  url(../fonts/OpenSans-Light-webfont.svg) format('svg');
}

Atau bila menggunakan google font:

<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

Kemudian untuk menggunakannya pada canvas:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

$(document).ready(function () {
     context.font = '40px Montserrat';
     context.fillStyle = 'orangered';
     context.textBaseline = 'top';
     context.fillText('Montserrat', 10, 270);
});

Namun, bila kita perhatikan pada saat loading pertama, canvas tidak me-render font dengan custom font, baru setelah kita refresh font akan muncul dengan benar. Mengapa hal ini terjadi? Karena proses loading font dilakukan secara asynchronous, jadi pada saat perintah context.fillText('Montserrat', 10, 270); diajlaankan, font masih dalam proses loading, sehingga belum dapat digunakan. Bagaimana bila perintah fillText diletakkan pada $(windows).load? Ternyata hal ini tidak cukup, karena dalam html tidak ada elemen yang menggunakan custom font ini, sehingga $(windows).load tidak menunggu proses loading font selesai. Untuk mengakalinya kita gunakan dummy element dengan css fontfamily = custom font, dipadukan dengan $(windows).load.

code:

<div id="container">
            <div id="editor" class="">
                <div id="image_container">
                    <div style="visibility: hidden; height: 0;font-family: Montserrat"></div>
                    <canvas id="canvas" width="400" height="347">

                    </canvas>
                </div> 
            </div>
        </div>
        <script type='text/javascript'>
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');

            $(document).ready(function () {
                context.fillStyle = 'black';
                context.textBaseline = 'top';
                context.fillText('default font', 10, 100);
            });
            $(window).load(function () {
                context.font = '40px Montserrat';
                context.fillStyle = 'orangered';
                context.textBaseline = 'top';
                context.fillText('Montserrat', 10, 270);
            });
        </script>

Pada listing di atas kita gunakan dummy element : <div style="visibility: hidden; height: 0;font-family: Montserrat"></div>

Untuk contoh lengkapnya lihat di sini.

www.paulussetyo.com

Related Posts
Comments ( 0 )
Add Comment

Your email address will not be published. Required fields are marked *