Let's generate a whiteboard By using HTML
Let's generate a whiteboard
By using HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Whiteboard with Pen Support</title>
<style>
body {
margin: 0;
padding: 10px;
font-family: Arial;
display: flex;
flex-direction: column;
align-items: center;
background: #f0f0f0;
}
canvas {
border: 2px solid black;
background-color: white;
touch-action: none; /* Important for stylus & touch */
}
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;
}
input[type="file"] {
display: none;
}
</style>
</head>
<body>
<h2>Whiteboard (Touch & Pen Supported)</h2>
<div class="toolbar">
<label>Color: <input type="color" id="colorPicker" value="#000000"></label>
<label>Size: <input type="range" id="penSize" min="1" max="20" value="3"></label>
<button onclick="toggleEraser()">Eraser</button>
<button onclick="clearBoard()">Clear</button>
<button onclick="document.getElementById('imageInput').click()">Import Image</button>
<input type="file" id="imageInput" accept="image/*">
</div>
<canvas id="whiteboard" width="900" height="500"></canvas>
<script>
const canvas = document.getElementById("whiteboard");
const ctx = canvas.getContext("2d");
const colorPicker = document.getElementById("colorPicker");
const penSize = document.getElementById("penSize");
const imageInput = document.getElementById("imageInput");
let drawing = false;
let isEraser = false;
function getPos(e) {
if (e.touches) {
return {
x: e.touches[0].clientX - canvas.offsetLeft,
y: e.touches[0].clientY - canvas.offsetTop
};
} else {
return {
x: e.offsetX,
y: e.offsetY
};
}
}
function startDraw(e) {
drawing = true;
const pos = getPos(e);
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
}
function stopDraw() {
drawing = false;
ctx.beginPath();
}
function draw(e) {
if (!drawing) return;
const pos = getPos(e);
ctx.lineWidth = penSize.value;
ctx.lineCap = "round";
ctx.strokeStyle = isEraser ? "#ffffff" : colorPicker.value;
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
}
canvas.addEventListener("mousedown", startDraw);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDraw);
canvas.addEventListener("mouseout", stopDraw);
canvas.addEventListener("touchstart", startDraw);
canvas.addEventListener("touchmove", draw);
canvas.addEventListener("touchend", stopDraw);
function toggleEraser() {
isEraser = !isEraser;
}
function clearBoard() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
imageInput.addEventListener("change", function () {
const file = this.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function (event) {
const img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>
Comments
Post a Comment