canvas を使ってお絵かきツールを作る方法と仕組み | q-Az解説 灰色のキャンバスの上でマウスを左クリックすると絵を描くことが出来ます。下のボタンで「透明度」「色」「サイズ」などを変えることが出来、「消」消しゴムと「×」全消し機能も付けました。 以下、コードと解説です。canvas についての細かい説明は省き、お絵かきツールを作るためのコードを中心に説明します。 JavaScript (function() { //HTML上の canvas タグを取得 var canvas = document.getElementById('myCanvas'); //レスポンシブ対応 画面サイズでキャンバスサイズを調整します if (screen.width < 860) { canvas.width = 700 * screen.width / 860; canvas.height = 400 * screen.width / 860; } //キャンバス
