HomeJavascriptCanvasCustom Neon Cursor With Javascript

Custom Neon Cursor With Javascript


In this tutorial, we will dive into the fascinating world of canvas drawing using HTML, CSS, and JavaScript. You will learn how to create a custom neon cursor, allowing users to paint vibrant trails with their mouse movements. This project is not only a fun and engaging way to understand canvas rendering but also an excellent opportunity to enhance your skills in front-end web development.

Things You Will Learn:

  1. Setting up an HTML canvas element
  2. Utilizing the Canvas 2D context for drawing
  3. Managing mouse events for interactive drawing
  4. Creating a visually appealing trail effect
  5. Incorporating animation using requestAnimationFrame

Video Tutorial:

Here is the video tutorial for this project. If you like the tutorial subscribe to my YouTube channel. I post new projects based on HTML, CSS, and Javascript on my channel regularly.


Project Folder Structure:

Now before we move on to actual coding we create a project folder structure. We name the project folder as – ”Custom Neon Cursor With Javascript”. Within this folder, we have 3 files. These files are:

  • index.html
  • style.css
  • script.js


We begin with the HTML code. Copy the code below and paste it into your HTML document.

<!DOCTYPE html>
<html lang="en">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Neon Trail Cursor</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
    <canvas id="canvas"></canvas>
    <!-- Script -->
    <script src="script.js"></script>



Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.

body {
  margin: 0;
  overflow: hidden;
  cursor: none;
canvas {
  display: block;



Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const trailLength = 20;
const trailColor = "0,255,255"; //RGB values for cyan color
const trail = [];

function draw() {
  ctx.fillStyle = "rgba(0,0,0,0.1)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < trail.length; i++) {
    const alpha = 1;
    ctx.arc(trail[i].x, trail[i].y, 10, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(${trailColor},${alpha})`;

function addTrailPoint(x, y) {
  trail.push({ x, y });
  if (trail.length > 1) {

let mouseX = 0,
  mouseY = 0;
const startDrawing = (e) => {
  const newX = e.clientX;
  const newY = e.clientY;
  addTrailPoint(newX, newY);
  mouseX = newX;
  mouseY = newY;

canvas.addEventListener("mousemove", startDrawing);

window.onload = () => {



Congratulations! You’ve successfully created an interactive trail drawing canvas using HTML, CSS, and JavaScript. This project not only introduces you to the fundamentals of canvas rendering but also provides a solid foundation for more advanced web development projects. Experiment with different colors, sizes, and effects to customize your canvas further. Keep exploring and enhancing your front-end skills!




Please enter your comment!
Please enter your name here

sixteen − 5 =

Most Popular