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

Question

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

<template>
      <canvas
        id="preview"
        :style="{
          border: 'solid 1px #000',
          'background-color': #ff0000
        }"
      >
      </canvas>
</template>

//描画処理
<script>
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()
    },
  },
}
</script>

    downloadCanvas() {
      const canvasImage = document.getElementById('preview')
      const link = document.createElement('a')
      link.href = canvasImage.toDataURL('image/png')
      link.download ='hoge.png'
      link.click()
    },

※今回canvas描画部分の処理は必要ないので省きました

Comments

[m.ts10806]

そもそもjpgは透過できないので、仕様と言えば仕様ですがjpgでなくてはいけないということでしょうか

[x_x]

HTMLとして提示されたコードはHTMLではないようですが、何なのでしょうか？
また、どのように描画しているかは重要です(alphaオプションなど)。

[tokuwgawa]

mts10806さん
背景色さえ設定できれば大丈夫なので、どの形式でも大丈夫です。

[tokuwgawa]

x_xさん
すみません。こちらNuxt.jsのコードです。
canvasがHTMLの機能だったもので、HTMLと書いた方がわかりやすいのかと思ってしまいました。
コード追記します。

[m.ts10806]

どのような画像を採用しているか知りませんが、「透過PNG画像」で解決しませんか？

[tokuwgawa]

mts10806さん
質問の仕方が悪くてすみません。
スタイルで設定しているバックグラウンドカラーが反映されてる状態で画像を保存したいといった趣旨の質問です。

[tokuwgawa]

現在の状態ではpngで保存するとバックグランドカラーを指定しているのに保存画像をみるとバックグランドが透明になってしまいます。
jpgで保存して保存画像をみるとバックグランドが真っ黒になってしまいます。

[m.ts10806]

質問は編集できるので先のNuxt.jsの件も含めて追記してください。

[tokuwgawa]

今追記しましたのでよろしくお願いします。

Answer 1

clearRect() は、領域を透明色（透明な黒）で塗りつぶします。
なので、正常に画像が出ているということになります。
別の色を付けたいのであれば色を指定したうえで、fillRect() 等の描画メソッドを使ってください。

https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/clearRect

https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/fillRect

Nuxt.jsはよくわかりませんが、おそらくstyle属性になるのでしょう。これは画像には反映されません。