Online interactive paint board

arctosSdkInstance.$meetingRoom.onSessionCreated.subscribe((event) => {
    //If you are the moderator, make the window full and initialize the canvas.
    if(newRole === 'MODERATOR'){
        arctosSdkInstance.$meetingRoom.setTemplate(0);

        utilsCanvasInit();
  }
});

utilsCanvasInit = async function() {  // 畫布初始化
    video = document.querySelector('arctos-widget').shadowRoot.querySelector("#video-undefined");

    //When resizing the screen, reset the canvas size
    window.addEventListener('resize', onResize);
    function onResize() {
        overlay.width = meetingCnt.offsetWidth * pixelRatio;
        overlay.height = meetingCnt.offsetHeight * pixelRatio -70;
        ctx = overlay.getContext("2d");
        ctx.globalCompositeOperation = 'multiply';
        ctx.lineCap = "round";
        ctx.strokeStyle = strokeColor;
        ctx.lineWidth = strokeWidth;
  }
  onResize();

//Add canvas color selection button
let cGroup = document.querySelector('.colorGroup');
for (let i = 0; i < colorAry.length; i++) {
    let btn = document.createElement('button');
    btn.addClass = "btn";
    btn.style.backgroundColor = colorAry[i];
    btn.addEventListener("click", function(){onChangeColor(colorAry[i])});
    cGroup.appendChild(btn);
}

//Set brush width and height
dynamicCursor.width = strokeWidth + "px";
dynamicCursor.height = strokeWidth + "px";
};

// 1. Screenshot explanation
function onCutPic() {
    html2canvas(document.querySelector('arctos-widget')).then(img => {
        currentBgImg = img.toDataURL('image/jpeg',1);
        utilsDrawImage(currentBgImg, overlay, 0, 0, meetingCnt.offsetWidth, meetingCnt.offsetHeight-70);
    });
};

// 2. Canvas clearing
function onClearAll(e) {
    ctx.clearRect(0, 0, meetingCnt.offsetWidth * pixelRatio, meetingCnt.offsetHeight * pixelRatio -70);
    historyImgs = [];
    currentImgsIdx = -1;

    updateResolution();
};

// 3. Save the picture as
function onSave() {
    const anchor = document.createElement('a');
    anchor.href = overlay.toDataURL('image/png');
    anchor.download = 'image.png';
    anchor.click();
};

// 4. Brush thickness
function onPen() {
    toolbar.querySelector('.action.pen').classList.toggle('bold');
    ctx.lineWidth = penBoo?16:4;
    penBoo = !penBoo;
};

// 5. Color switching
function onChangeColor(str) {
    strokeColor = str;
    ctx.strokeStyle = strokeColor;
    dynamicCursor.backgroundColor = strokeColor;
};