code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Sign Canvas</title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
}
canvas{
border:1px solid #000;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
cursor: default;
margin-bottom: 20px;
background-color: #fff;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
canvas.active {
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7);
cursor: crosshair;
}
</style>
</head>
<body>
<div class="container">
<canvas id="drawingCanvas" width="400" height="400"></canvas>
<button id="writeButton">Button</button>
</div>
<!-- //let's come to our main logic -->
<script>
const canvas=document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
const button = document.getElementById('writeButton');
let isDrawing=false;
let canDraw=false;
canvas.addEventListener('mousedown',startDrawing)
canvas.addEventListener('mousemove',draw)
canvas.addEventListener('mouseup',stopDrawing)
button.addEventListener('click', () => {
canDraw = !canDraw; // Toggle drawing mode
if (canDraw) {
canvas.classList.add('active');
} else {
canvas.classList.remove('active');
}
});
function startDrawing(e){
if(!canDraw)return;
isDrawing=true;
ctx.beginPath();
ctx.moveTo(e.offsetX,e.offsetY)
}
function draw(e) {
if (!isDrawing) return;
ctx.lineTo(e.offsetX, e.offsetY);
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.stroke();
}
function stopDrawing() {
if (!canDraw) return;
isDrawing = false;
ctx.closePath();
}
</script>
</body>
</html>