⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Custom Mouse Cursor Tutorial Canvas CSS HTML

Published : April 4, 2017   •   Last Edited : November 24, 2025   •   Author : Adam Khoury

Learn how to change the mouse cursor or pointer to a custom cursor and change the hotspot for the click area.

Lesson Code 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
canvas {
	cursor: url(crosshair.cur), default;
	/* Change the hotspot - cursor: url(crosshair.cur) 0 0, default; */
	background:#F4F4F4;
	display: block;
}
</style>
</head>
<body>
<canvas></canvas>
</body>
</html>
▲