Create Custom Cursors Using JavaScript And Canvas – custom-curses

custom-curses is a tiny custom cursor library that lets you replace the default mouse cursor with custom strings. With the custom-curses library, you can easily customize the appearance of your cursor to match the theme of your website.

How to use it:

1. Import the necessary modules from the custom-curses.

import { Cursor, Pointer, initializeCanvas } from "custom-curses";

2. Create custom pointers as follows. Note that the library allows you to combine multiple pointers into a mouse cursor.

let objects = []
const pointer1 = new Pointer({
      pointerShape: ['string', 'Cursor String Here'],
      // options here
}, objects)
const pointer2 = new Pointer({
      pointerShape: ['string', 'Cursor String Here'],
      // options here
}, objects)
// more pointers here

3. Initialize the custom-curses.

const myCursor = new Cursor({
      pointers: [pointer1, pointer2, pointer3, ...],
      drag: 0, //where 1 is max
      hideMouse: true,
});
let instance = initializeCanvas(myCursor, objects);

4. All default pointer options.

const pointer1 = new Pointer({
      pointerShape: ['string', '💧'],
      colors: ['default'],
      drag: 0,
      size: 50,
      rotation: 0,
      xCharOffset: 0,
      yCharOffset: 0,
      xOffset: 0,
      yOffset: 0
}, objects)

5. All default cursor options.

const myCursor = new Cursor({
      pointers: null,
      hideMouse: true,
      drag: 0,
      xOffset: 0,
      yOffset: 0
});

Changelog:

v0.1.18 (02/19/2023)

• Updated

v0.1.16 (02/13/2023)

• Implemented Element Pointer type, with support for secondary cursor switching
• Objects array removal

v0.1.14 (01/05/2023)

• Now includes Image pointer type

v0.1.13 (01/03/2023)

• Cleanup functions to allow for switching pointers
• Several bug fixes