Html
<html>
<head>
<meta charset="utf-8">
<title>My canvas</title>
</head>
<body>
<center>
<canvas id='myCanvas1' style='background-color:white; border:1px solid black;' width='600px' height='400px'/>
</center>
</body>
<script>
var myCanvas = document.getElementById("myCanvas1");
myCanvas.onmousedown = MyClickCanvas;
var context = myCanvas.getContext('2d');
var lastX = null;
var lastY = null;
function MyClickCanvas(e)
{
const rect = myCanvas.getBoundingClientRect();
var x = e.clientX - rect.x;
var y = e.clientY - rect.y;
if (lastX!=null && lastY!=null)
MyDrawLine(context, 'black' /*color*/, 2 /*line width*/, lastX, lastY, x, y);
lastX = x;
lastY = y;
}
function MyDrawLine(context, lineColor, lineWidth, x1, y1, x2, y2)
{
context.resetTransform();
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.lineWidth = lineWidth;
context.strokeStyle = lineColor;
context.stroke();
}
</script>
</body>
</html>
Your feedback ... Comments ...