太さ
色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>お絵かきアプリ</title>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
border: 2px solid black;
}
#toolbar {
background-color: #f7f7f7;
padding: 10px;
}
button {
margin-right: 10px;
}
</style>
</head>
<body>
<div id="toolbar">
<button id="pencil">鉛筆</button>
<button id="eraser">消しゴム</button>
<input type="number" id="stroke-width" min="1" max="50" step="1" value="5"> 太さ
<input type="color" id="stroke-color" value="#000000"> 色
</div>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const pencilButton = document.getElementById('pencil');
const eraserButton = document.getElementById('eraser');
const strokeWidthInput = document.getElementById('stroke-width');
const strokeColorInput = document.getElementById('stroke-color');
// Set canvas size to window size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Default stroke style
context.strokeStyle = strokeColorInput.value;
context.lineWidth = strokeWidthInput.value;
let isDrawing = false;
let lastX = 0;
let lastY = 0;
function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop];
}
function draw(e) {
if (!isDrawing) return;
const [x, y] = [e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop];
context.beginPath();
context.moveTo(lastX, lastY);
context.lineTo(x, y);
context.stroke();
[lastX, lastY] = [x, y];
}
function endDrawing() {
isDrawing = false;
}
function setStrokeStyle() {
context.strokeStyle = strokeColorInput.value;
context.lineWidth = strokeWidthInput.value;
}
function enablePencilMode() {
canvas.removeEventListener('mousedown', startErasing);
canvas.removeEventListener('mousemove', erase);
canvas.removeEventListener('mouseup', endErasing);
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', endDrawing);
context.globalCompositeOperation = 'source-over';
pencilButton.classList.add('active');
eraserButton.classList.remove('active');
}
function startErasing(e) {
isDrawing = true;
[lastX, lastY] = [e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop];
}
function erase(e) {
if (!isDrawing) return;
const [x, y] = [e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop];
context.beginPath();
context.moveTo(lastX, lastY);
context.lineTo(x, y);
context.globalCompositeOperation = 'destination-out';
context.stroke();
[lastX, lastY] = [x, y];
}
function endErasing() {
isDrawing = false;
}
function enableEraserMode() {
canvas.removeEventListener('mousedown', startDrawing);
canvas.removeEventListener('mousemove', draw);
canvas.removeEventListener('mouseup', endDrawing);
canvas.addEventListener('mousedown', startErasing);
canvas.addEventListener('mousemove', erase);
canvas.addEventListener('mouseup', endErasing);
context.globalCompositeOperation = 'destination-out';
eraserButton.classList.add('active');
pencilButton.classList.remove('active');
}
setStrokeStyle();
enablePencilMode();
pencilButton.addEventListener('click', enablePencilMode);
eraserButton.addEventListener('click', enableEraserMode);
strokeWidthInput.addEventListener('change', setStrokeStyle);
strokeColorInput.addEventListener('change', setStrokeStyle);
console.log(`Why did the tomato turn red? Because it saw the salad dressing!`);
</script>
</body>
</html>