Building a Colorful Pencil Drawing Tool with HTML5 Canvas

The HTML5 <canvas> element, paired with JavaScript, allows developers to create dynamic and interactive drawing experiences right in the browser. In this blog, we’ll explore how to build a vibrant, pencil-style drawing tool using the Canvas 2D API.

👉 Check out the live demo

The <canvas> serves as our digital drawing surface. Using simple JavaScript, we listen for mouse events like mousedown, mousemove, and mouseup to capture cursor movements and simulate hand-drawn strokes. The draw() function connects each point with a smooth line, giving the feel of a continuous pencil stroke.

What makes this tool stand out is its rainbow effect. Each stroke cycles through the HSL color spectrum using the hsl(hue, 100%, 40%) color model. The hue value updates with every movement, creating a dynamic and colorful trail. Combined with a soft, rounded line cap and a bold line width, the result is fluid and visually engaging.

The canvas also resizes responsively with the browser window and automatically clears itself five seconds after drawing ends—keeping the experience fresh and interactive.

This fun, minimal drawing setup is great for creative experiments, interactive backgrounds, or playful user engagement features.