在線互動畫板

arctosSdkInstance.$meetingRoom.onSessionCreated.subscribe((event) => {
    //如果你是主持人，將窗口全屏並初始化畫布。
    if(newRole === 'MODERATOR'){
        arctosSdkInstance.$meetingRoom.setTemplate(0);

        utilsCanvasInit();
  }
});

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

    //當調整屏幕大小時，重置畫布大小
    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();

//添加畫布顏色選擇按鈕
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);
}

//設置畫筆寬度和高度
dynamicCursor.width = strokeWidth + "px";
dynamicCursor.height = strokeWidth + "px";
};

// 1. 截圖說明
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. 清除畫布
function onClearAll(e) {
    ctx.clearRect(0, 0, meetingCnt.offsetWidth * pixelRatio, meetingCnt.offsetHeight * pixelRatio -70);
    historyImgs = [];
    currentImgsIdx = -1;

    updateResolution();
};

// 3. 保存圖片
function onSave() {
    const anchor = document.createElement('a');
    anchor.href = overlay.toDataURL('image/png');
    anchor.download = 'image.png';
    anchor.click();
};

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

// 5. 顏色切換
function onChangeColor(str) {
    strokeColor = str;
    ctx.strokeStyle = strokeColor;
    dynamicCursor.backgroundColor = strokeColor;
};