WebSocket を使って、複数人が自分のピンを共有できる Web アプリを作ると面白そうです。その前に、どうやって JavaScript で Canvas 内にピンを表示するのか試してみました。

HTML 部分

<canvas id="canvas" width="400" height="200"></canvas>

CSS 部分

#canvas {
    border: 1px solid black;
    background-size: cover;
    width: 400px;
    height: 200px;
}

JavaScript 部分

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

canvas.addEventListener('click', function(event) {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    clearCanvas();
    drawPin(x, y);
});

function clearCanvas() {
    if (context) {
        context.clearRect(0, 0, canvas.width, canvas.height);
    }
}

function drawPin(x, y) {
    if (context) {
        context.beginPath();
        context.arc(x, y, 5, 0, 2 * Math.PI); // 半径5の円を描画
        context.fillStyle = 'red'; // ピンの色
        context.fill();
        context.stroke();
    }
}

JSFiddle の実行結果

タグ: JavaScript, JSFiddle