ARTICLE AD BOX
Here are some fixes:
// Source - https://stackoverflow.com/q/79889651
// Posted by TIAGO MGBECHETA, modified by community. See post 'Timeline' for change history
// Retrieved 2026-02-15, License - CC BY-SA 4.0
const canvas = document.querySelector(".cnv-layer");
const pencilTool = document.querySelector(".pencil"); // SA: defined
const activeTool = "pencil";
pencilTool.addEventListener("click", () => {
canvas.style.pointerEvents = "auto";
// pencilTool.style.backgroundColor = "blanchedalmond";
});
//Pencil Tool
const context = canvas.getContext("2d");
// console.log(context);
let isDrawing = false;
let isStarted = false; // SA: added
canvas.addEventListener("mousedown", e => {
if (activeTool !== "pencil") return;
isDrawing = true;
});
canvas.addEventListener("mouseup", e => { // SA: added
if (activeTool !== "pencil") return; // SA: dows nothing
isDrawing = false;
isStarted = false;
});
canvas.addEventListener("mousemove", e => {
if (activeTool !== "pencil" || !isDrawing) return;
if (!isStarted) { // SA: behavior on the first move:
isStarted = true;
context.moveTo(e.offsetX, e.offsetY);
return;
}
//context.beginPath(); // SA: removed!
context.lineWidth = 3
//context.moveTo(lastX, lastY); // SA: removed!
context.lineTo(e.offsetX, e.offsetY);
context.stroke();
})
<!--
Source - https://stackoverflow.com/q/79889651
Posted by TIAGO MGBECHETA, modified by community. See post 'Timeline' for change history
Retrieved 2026-02-15, License - CC BY-SA 4.0
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="An online use to draw, import and edit imges and share too"
/>
<link rel="stylesheet" href="blaqdpad.css" />
<script src="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]"></script>
<script src="blaqdpad.js" defer></script>
<title>BlaqdPad - Import, Edit, Draw, Share!</title>
</head>
<body>
<div class="blaqdpad">
<aside class="toolbar">
<div class="tools_top tools">
<button class="select btn">
<i class="ph-duotone ph-cursor"></i>
<span class="description">Select</span>
</button>
<button class="import btn">
<i class="ph-duotone ph-file-arrow-down"></i>
<span class="description">Import</span>
</button>
<button class="pencil btn">
<i class="ph-duotone ph-pencil"></i>
<span class="description">Pencil</span>
</button>
<button class="new-file btn">
<i class="ph-duotone ph-file-plus"></i>
<span class="description">New Canva</span>
</button>
<button class="download btn">
<i class="ph-bold ph-download"></i>
<span class="description">Download</span>
</button>
</div>
<div class="tools_bottom tools">
<button class="setting btn">
<i class="ph-duotone ph-wrench"></i>
<span class="description">Settings</span>
</button>
</div>
</aside>
<main class="checkboard">
<div class="img-layer"></div>
<canvas class="cnv-layer"></canvas>
</main>
</div>
<input type="file" accept="image/*" id="input" />
</body>
</html>
Now, line drawing works, but the entire approach has problems.
First, your code sample does not run at all. The code fails because pencilTool was not defined. (It was not defined in the original code I had when I answered the question, later it was fixed in the question post by yogi.)
Please see my comments // SA: ... in code.
I defined const activeTool = "pencil"; However, it does nothing, only fixes the syntax. I guess it is reserved for the future. Please see the note below. I removed redundant brackets around e. It makes no difference. I removed context.beginPath(); it does nothing. I added removed context.moveTo and added the move to the currect point on the first move. I added missing handler for "mouseup". I added the flag isStarted. It becomes true on the first move, when you don't need to draw a line, but you only have to move the current point using context.moveTo. It is cleared on "mouseup". This way, I implemented a different behavior: to start a new line every time a pointer is pressed but continue the same line in the serious of moves.You can use it as a starting point, but everything needs improvements. For example, why would you need to set the line width in the "mousemove" event? Obviously, you have to have tools control and set all properties there. The code should be combed in general. One bad thing is using magic words such as activeTool. Using strings as enumerators is a bad idea.
Also, I would suggest you use not mouse events, but corresponding pointer events, to make the behavior identical but more universal.
