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.