JavaScriptを使用してブラウザで動作する最もシンプルなな描画ボードの実装方法

<div class="custom-draw-board" style="border:2px solid #ccc">
    <canvas id="customCanvas" width="300" height="300"></canvas>
    <hr>
    <button onclick="customBeginDraw()">ペン</button>
    <button onclick="customChangeToRed()">レッド</button>
    <button onclick="customClearCanvas()">クリア</button>
    <button onclick="customSubmitCanvas()">確定</button>
    <input type="number" id="customThickness" min="1" value="1">
    <hr>
    <img src="" alt="" id="customCanvasImage">
</div>

.custom-draw-board {
    width: 300px;
    margin: 30px auto;
}

// HTMLドキュメントから特定の要素を選択
var customCanvas = document.querySelector('#customCanvas'); // お絵描きボードのキャンバス要素
var customButtons = document.querySelectorAll('.custom-draw-board button'); // お絵描きボードの全ボタン
var customInput = document.querySelector('#customThickness'); // 線の太さを制御する入力フィールド

var ctx = customCanvas.getContext('2d'); // canvasの2Dレンダリングコンテキストを取得
var customThicknessValue; // 現在の線の太さを保持する変数

// 描画太さの監視
// 線の太さを制御する入力フィールドの値が変更されたか定期的にチェック
setInterval(function(event){
    if(customThicknessValue != document.getElementById("customThickness").value){
        customThicknessValue = document.getElementById("customThickness").value; // 新しい値を変数に保存
    }
}, 100); // 100ミリ秒ごとにチェック

// ペン機能の切り替え
function customBeginDraw(){
    if(customButtons[0].style.backgroundColor === 'red'){ // ペンボタンが既にアクティブなら
        customButtons[0].style.backgroundColor = ''; // ボタンの背景色をリセット
        customCanvas.removeEventListener('mousedown', customStart); // 描画開始イベントを削除
    }else{ // ペンボタンが非アクティブなら
        customButtons[0].style.backgroundColor = 'red'; // ボタンをアクティブにする
        customCanvas.addEventListener('mousedown', customStart); // マウスが押された時に描画を開始するイベントを追加
    }
}

// 色を赤に変更
function customChangeToRed(){
    if(customButtons[1].style.backgroundColor === 'red'){ // 色変更ボタンが既にアクティブなら
        customButtons[1].style.backgroundColor = ''; // ボタンの背景色をリセット
        ctx.strokeStyle = '#000000'; // 描画色を黒に戻す
    }else{
        customButtons[1].style.backgroundColor = 'red'; // ボタンをアクティブにする
        ctx.strokeStyle = 'red'; // 描画色を赤に変更
    }
}

// canvasのクリア
function customClearCanvas(){
    ctx.clearRect(0, 0, 300, 300); // canvas全体をクリア
}

// 描画開始
function customStart(e){
    ctx.beginPath(); // 新しい描画パスを開始
    ctx.lineWidth = customThicknessValue; // 線の太さを設定
    ctx.lineJoin = 'round'; // 線の結合点を丸くする
    ctx.lineCap = 'round'; // 線の端を丸くする
    var { offsetX: startX, offsetY: startY } = e; // クリックされた座標を取得
    ctx.moveTo(startX, startY); // 描画開始点を設定
    customCanvas.addEventListener('mousemove', customDraw); // マウスが動いている間、描画を続けるイベントを追加
    customCanvas.addEventListener('mouseleave', customStopDrawing); // マウスがキャンバスから離れたら描画を停止するイベントを追加
}

// 描画停止
function customStopDrawing(){
    customCanvas.removeEventListener('mouseleave', customStopDrawing); // 描画停止イベントを削除
    customCanvas.removeEventListener('mousemove', customDraw); // 描画続行イベントを削除
}

// 描画実行
function customDraw(e){
    var { offsetX: currentX, offsetY: currentY } = e; // 現在のマウス座標を取得
    ctx.lineTo(currentX, currentY); // 最後の点から現在の点まで線を引く
    ctx.stroke(); // 描画を実行
}

// 描画内容の確定
function customSubmitCanvas(){
    var img = document.querySelector('#customCanvasImage'); // 確定された描画を表示する画像要素を選択
    img.src = customCanvas.toDataURL('image/png'); // canvasの内容を画像データとして取得し、画像要素のソースに設定
    img = null; // クリア
}