2020/07/20

JavascriptでCanvasのクリアを行う

概要

こちらの記事 (WebページでQRコードを表示する)でQRコードをcanvasに表示する処理を作りましたが…

今回はそのデータをリセットする処理を追加しました。

（QRコードに限らず、canvasの2Dデータであれば全て同じように処理することができます。）

実装内容

const canvas = window.document.getElementById('qrcode')
const ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height)

これだけですね。簡単でした。

以上です。

関連する記事

【１行】JavascriptでCookieの全削除

たまにやるCookie全削除のJavascriptです

Nuxt2からNuxt3への移行とNextJSとNuxt3の比較について

弊社ホームページとブログサイトをNuxt2からNuxt3ベースに移行しました。

[NextJs]Google Mapでマーカーをセンターに表示するコンポーネントの作成

NextJsアプリ内で、Google Mapを表示して、中心にマーカーを配置するコンポーネントを作成しました。

[Next.js]client側のみで読み込むcomponent（SSRのエラーを回避）

組織図を描画するreactライブラリ`react-organizational-chart`をサーバー側で呼び込む際にエラーになる方法に対処しました

Table of Contents

概要
実装内容