Cara menggabungkan 2 gambar dalam 1 area/canvas (Web Dev)

Cara menggabungkan 2 gambar dalam 1 area/canvas (Web Dev)

Hai guys, kali ini gw ingin share sebuah tutorial. Tutorial kali ini adalah caya menggabungkan 2 gambar dalam 1 area/canvas. Mungkin ini bisa digunakan untuk membuat sebuah twibbon seperti gambar dibawah ini

Bagaimana cara membuatnya ? Ayo kita simak code berikut

<!-- Berfungsi sebagai input gambar -->
<img src="gambar1.png" id="img1" width="600px" height="600px" hidden="true">
<img src="gambar2.png" id="img2" width="600px" height="600px" hidden="true">

<!-- Hasil output setelah digabung -->
<h2><b>Hasil</b><br><br><canvas id="canvas"></canvas>

// Javascript
<script>
window.onload = function () {

// Mensetting Variabel
    var img1 = document.getElementById('img1');
    var img2 = document.getElementById('img2');
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var width = img2.width;
    var height = img2.height;
    canvas.width = width;
    canvas.height = height;

// Fungsi untuk men-draw gambar
    context.drawImage(img1, 0, 1, width, height);
    var image1 = context.getImageData(0, 0, width, height);
    var imageData1 = image1.data;
    context.drawImage(img2, 0, 0, width, height);
    var image2 = context.getImageData(0, 0, width, height);
    var imageData2 = image2.data;
};
</script>

Demikian tutorial yang dapat saya berikan :D Semoga bermanfaat :D