canvasを画像化してダウンロードする処理を作ったのですが、画像化されたファイルを見に行ってみるとバックグランドカラーだけが反映されず困っています。 `png`形式にすると背景が透明色で保存され、`jpeg`で保存すると背景色が真っ黒で表示されます。 ```html //描画処理 export default { mounted() { this.ctx = document.getElementById('preview').getContext('2d') this.drawCreative() }, methods: { drawCreative() { this.ctx.canvas.width = 500 this.ctx.canvas.height = 500 this.ctx.beginPath() this.ctx.clearRect(0, 0, 500, 500) this.ctx.fill() }, downloadCanvas() { const canvasImage = document.getElementById('preview') const link = document.createElement('a') link.href = canvasImage.toDataURL('image/png') link.download = 'hoge.png' link.click() }, }, } ``` ```js downloadCanvas() { const canvasImage = document.getElementById('preview') const link = document.createElement('a') link.href = canvasImage.toDataURL('image/png') link.download ='hoge.png' link.click() }, ``` ※今回canvas描画部分の処理は必要ないので省きました

【Nuxt.js】canvasを画像化する際にバックグランドカラーが表示されない【Javascript】

canvasを画像化してダウンロードする処理を作ったのですが、画像化されたファイルを見に行ってみるとバックグランドカラーだけが反映されず困っています。
png形式にすると背景が透明色で保存され、jpegで保存すると背景色が真っ黒で表示されます。

html
1<template>
2      <canvas
3        id="preview"
4        :style="{
5          border: 'solid 1px #000',
6          'background-color': #ff0000
7        }"
8      >
9      </canvas>
10</template>
11
12//描画処理
13<script>
14export default {
15  mounted() {
16    this.ctx = document.getElementById('preview').getContext('2d')
17    this.drawCreative()
18  },
19  methods: {
20    drawCreative() {
21      this.ctx.canvas.width = 500
22      this.ctx.canvas.height = 500
23      this.ctx.beginPath()
24      this.ctx.clearRect(0, 0, 500, 500)
25      this.ctx.fill()
26    },
27    downloadCanvas() {
28      const canvasImage = document.getElementById('preview')
29      const link = document.createElement('a')
30      link.href = canvasImage.toDataURL('image/png')
31      link.download = 'hoge.png'
32      link.click()
33    },
34  },
35}
36</script>
37

js
1    downloadCanvas() {
2      const canvasImage = document.getElementById('preview')
3      const link = document.createElement('a')
4      link.href = canvasImage.toDataURL('image/png')
5      link.download ='hoge.png'
6      link.click()
7    },