html - 使用 toDataURL 并将其转换为 jpg

Question

我已经画了一个如下所示的日本国旗，并且我使用了两次 toDataURL。第一个工作正常，与画布相同，但第二个出现黑色背景，我不知道为什么？？！

        canvas = document.getElementById('mycanvas')
        context = canvas.getContext('2d')
        context.fillStyle= 'red'
        canvas.style.border = '1px solid black'

        context.beginPath()
        context.moveTo(160 , 120)
        context.arc(160 , 120 , 70 , 0 , Math.PI *2 , false)
        context.closePath()
        context.fill()

        image = document.getElementById('myimage')
        image.style.border = '1px solid black'
        image.src = canvas.toDataURL()

        image2 = document.getElementById('myimage2')
        image2.style.border = '1px solid black'
        image2.src = canvas.toDataURL('image/jpeg' , 10)

这就是“我使用 Chrome 和 FireFox 来测试这个” 的结果