canvas.js

var canvas =document.getElementById("canvas");
var ctx = setupCanvas(canvas);

/** Creates a HiDPI Canvas 
 * @url https://www.html5rocks.com/en/tutorials/canvas/hidpi/
*/
function setupCanvas(canvas) {
  // Get the device pixel ratio, falling back to 1.
  var dpr = window.devicePixelRatio || 1;
  // Get the size of the canvas in CSS pixels.
  var rect = canvas.getBoundingClientRect();
  // Give the canvas pixel dimensions of their CSS
  // size * the device pixel ratio.
  canvas.width = rect.width * dpr;
  canvas.height = rect.height * dpr;
  var ctx = canvas.getContext('2d');
  // Scale all drawing operations by the dpr, so you
  // don't have to worry about the difference.
  ctx.scale(dpr, dpr);
  return ctx;
}

//common setting
// var alpha=1;
// ctx.font = '35px Kalam';
// ctx.textAlign='center';
// ctx.fillStyle='rgba(255,255,255,'+ alpha +')';
// ctx.shadowOffsetX=3;
// ctx.shadowOffsetY=3;
// ctx.shadowColor='rgba(0,0,0, 1 )';
// ctx.shadowBlur=4;
// ctx.fillText('Bian Dang',canvas.width/2,canvas.height/2);



//fadeIn function1
// function fadeIn(){
//     var alpha=0;
//     if(alpha<0){
//         CanvasRenderingContext2D.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

//         alpha=alpha+0.01;
//         ctx.fillStyle='rgba(255,255,255,'+ alpha +')';
//         ctx.fillText('Bian Dang',canvas.width/2,canvas.height/2)
//         requestAnimationFrame(fadeIn);
//     }
// }



// fadein function2
var i=0;
var a=5;

function fadeIn(){
    ctx.font = '50px Kalam';
    ctx.textAlign='center';
    ctx.shadowOffsetX=3;
    ctx.shadowOffsetY=3;
    ctx.shadowColor='rgba(0,0,0,0.1)';
    ctx.shadowBlur=4;
    ctx.fillStyle=`rgba(255,255,255,${i})`;
    i=i+0.01;
    ctx.fillText('Bian Dang',canvas.width/2,canvas.height/2)
    if(i<1){
        requestAnimationFrame(fadeIn)
    }
    
}

window.addEventListener('load',fadeIn,false);

//mask

// Bian Dang open animation
var bianDang=document.getElementById('bianDang');
function openAnimate(){
    bianDang.style.background="url(img/bianDang_once_gif.gif)"
    bianDang.style.backgroundSize="cover";
}

bianDang.addEventListener('click',openAnimate)




/**
 * Add Images
 */
window.addEventListener('load', ()=>{
    // Split canvas into 3 pieces
    let imgWidth = canvas.width / 3;
    
    // First image
    let img1 = new Image();
    img1.addEventListener('load', (event) =>{
        ctx.drawImage(img1, imgWidth * 0, 0, imgWidth, 200);
    });
    img1.src = 'https://via.placeholder.com/300.png/0000FF/808080/O%20https://placeholder.com/';

    // Second Image
    let img2 = new Image();
    img2.addEventListener('load', (event) =>{
        ctx.drawImage(img2, imgWidth * 1, 0, imgWidth, 200);
    });
    img2.src = 'https://via.placeholder.com/300.png/FF0000/FFFFFF/O%20https://placeholder.com/';

    // Third Image
    let img3 = new Image();
    img3.addEventListener('load', (event) =>{
        ctx.drawImage(img3, imgWidth * 2, 0, imgWidth, 200);
    });
    img3.src = 'https://via.placeholder.com/300.png/09f/fff%20C/O%20https://placeholder.com/';
});