大家好，我想請問，
因為我的原始的canvas大小很大(width:2200，height:580)

我想把它縮小後，縮到width:580，height:300，然後放到pdf
我試過直接將原始的canvas縮小後導出，不過發現一個問題，就是畫質會不好。

所以我想在測試看看，做一個button，
然後在botton裡，直接重畫一個width:580，height:300的canvas，
然後再導出。
不過遇到一個問題。
就是我的ctxSmall的width跟height一直為0
在JS裡設定也一樣......

會跳出這個錯誤:

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
    at testP (http://localhost:3000/src/components/Home/ChartBar.vue?t=1646729207576:740:13)
    at HTMLLIElement.<anonymous> (http://localhost:3000/src/components/Home/ChartBar.vue?t=1646729207576:844:42)

用log抓到canvas是這樣:

<canvas width="0" height="0" style="width: 0px; height: 0px; display: block; box-sizing: border-box;">

以下是我的程式碼:

const testButton = function(){
    let ctxSmall = document.createElement('canvas');
    ctxSmall.width = 580
    ctxSmall.height = 300
    ctxSmall.style.width = '580px'
    ctxSmall.style.height = '300px'
    
    console.log('ctxSmall',ctxSmall);//測試
    let ContextSmall = ctxSmall.getContext("2d")
    let GradientStroke = ContextSmall.createLinearGradient(0, 0, 0, 150);
    // 定義漸變的 偏移 和 顏色
    GradientStroke.addColorStop(0, "#00FFFF");
    GradientStroke.addColorStop(1, "#75d1b8");
    let MyChartSmall = new Chart(ctxSmall, {.......})
    
    let CanVas = document.createElement('canvas')
    CanVas.width = ctxSmall.width;
    CanVas.height = ctxSmall.height;
    let ConText = CanVas.getContext('2d');
    ConText.fillStyle='#1a114e';
    ConText.fillRect(0, 0, 580, 300);
    ConText.drawImage(ctxSmall, 0, 0,580,300);
    return CanVas.toDataURL('image/jpeg', 1.0);
}