JSZipでcanvasのファイルを追加する

canvasはtoDataURL()を使えば、リンクを使ってのダウンロードが可能になりますが、JSZipなどでzipファイルにしてダウンロードするにはblobのほうが便利です。

blobにするにはtoBlob()メソッドを使うだけです。

    let canvas = document.getElementById('canvas')
        let zip = JSZip()
    canvas.toBlob((blob) => {
      zip.file(
        'filename.png',
        blob
      )
    })

JSZipでzipを作成して速攻でダウンロードする

    let zip = new JSZip()
    zip.generateAsync({ type: 'blob' }).then(function (content) {
      let link = document.createElement('a')
      link.href = window.URL.createObjectURL(content)
      link.download = 'test.zip'
      link.click()
    })

zipファイルの追加処理が重たい場合、非同期処理にするなどの工夫が必要です。