Membuat kanvas bersifat responsif #2: Layar Penuh

Pada pembahasan kali ini kita akan membahas bagaimana membuat kanvas yang bersifat responsif dengan cara men-skala kanvas agar bisa memenuhi layar, dengan tetap menjaga rasio agar tampilan tidak melar. 

Sebelumnya kita sudah membahas tentang macam-macam skala dan bagaimana men-skala kanvas dengan menjaga agar tidak ada bagian yang terpotong.

Kode sumber bisa diunduh di tautan ini:

Demo bisa dilihat di tautan ini. Silahkan ubah-ubah ukuran browser untuk melihat hasilnya.

Contoh hasilnya adalah seperti gambar di bawah ini:


Tampilan landskape


Tampilan portrait

Dari kedua tampilan di atas terlihat bagaimana kanvas akan selalu terlihat memenuhi layar.

Penjelasan Kode:
Bisa dibilan 99% kode pada pembahasan sekarang sama persih dengan kode pada pembahasan sebelumnya. Yang membedakan hanyalah satu baris saja. Perhatikan fungsi resize berikut:

function resize() {
    let cp = 360;
    let cl = 218;
    let wp = window.innerWidth;
    let wl = window.innerHeight;
    let ratio = Math.max((wp / cp), (wl / cl));
    let cp2 = Math.floor(cp * ratio);
    let cl2 = Math.floor(cl * ratio);
    canvas.style.width = cp2 + 'px';
    canvas.style.height = cl2 + 'px';
    canvas.style.top = ((wl - cl2) / 2) + 'px';
    canvas.style.left = ((wp - cp2) / 2) + 'px';
    gambarCanvas(canvasCtx);
}

Perbedaannya adalah dalam mencari ratio.

    let ratio = Math.max((wp / cp), (wl / cl));

Bila sebelumnya kita menggunakan Math.min(), maka sekarang kita pakai Math.max().

Dengan menggunakan Math.max(), kita mendapatkan ratio yang paling besar. 

Bila panjang horisontal kanvas hasil skala sama dengan tinggi layar, maka bagian vertikal kanvas akan terpotong. Bila tingginya yang sama, maka bagian panjangnya yang akan terpotong.

Penjelasan lengkapnya untuk bagian yang lain bisa dibaca pada tulisan sebelumnya.

Terima kasih telah mampir dan membaca. Pada tulisan berikutnya Saya akan membicarakan metode responsif yang lain, Insya Allah.

Macam kanvas responsif

Tulisan ini akan membahas macam kanvas responsif. Responsif disini maksudnya adalah kanvas itu akan berubah ukurannya mengikuti resolusi layar. Hal ini sangat penting dalam pembuatan aplikasi pada telepon genggam karena banyaknya resolusi yang dimiliki.

Secara umum ada empat macam pendekatan untuk responsif yang pernah Saya temui. Tiga pertama sering dipakai di applikasi umum sedangkan yang terakhir hanya saya temukan di aplikasi Animate. Saya tidak membahas yang terakhir karena penggunaannya kurang umum dan Saya kurang paham juga.

Yang pertama disebut letterbox, pan atau kotak. Memiliki ciri-ciri sebagai berikut:
Rasio kanvas tetap
Kanvas diskala hingga memenuhi layar, tapi tidak sampai membuat gambar melebihi layar.
Ada jeda kosong di pinggir samping atau atas, karena rasio kanvas dan layar kadang tidak sama.

Yang kedua disebut strecth atau melar.
Rasio kanvas tidak dijaga, membuat gambar tampak melar tidak merata.
Kanvas diskala hingga memenuhi layar.
Tidak ada jeda kosong.

Yang ketiga disebut background atau cover, atau layar-penuh
Rasio kanvas tetap
Kanvas diskala memenuhi layar hingga melebihi layar dan gambar terpotong.
Tidak ada jeda kosong.

Penjelasan Saya cukupkan sampai sini dulu, berikutnya kita akan membahas yang pertama di tulisan berikutnya.