improvement: add white dot in middle of cursor

This will slightly improve visibility on black background.
comatory · Nov 7, 2023 · e9884ec · e9884ec
1 parent b898669
commit e9884ec
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/js/canvas-utils.mjs b/js/canvas-utils.mjs
@@ -6,6 +6,7 @@ const CURSOR_SIZE = 20;
 
 export function drawCursor(x, y) {
   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  const half = CURSOR_SIZE / 2;
 
   ctx.lineWidth = 5;
   ctx.lineCap = "round";
@@ -17,7 +18,16 @@ export function drawCursor(x, y) {
   ctx.stroke();
 
   ctx.beginPath();
-  ctx.moveTo(x + CURSOR_SIZE / 2, y - CURSOR_SIZE / 2);
-  ctx.lineTo(x + CURSOR_SIZE / 2, y + CURSOR_SIZE / 2);
+  ctx.moveTo(x + half, y - half);
+  ctx.lineTo(x + half, y + half);
   ctx.stroke();
+
+  ctx.closePath();
+
+  ctx.moveTo(x + half, y + half);
+  ctx.strokeStyle = COLOR.WHITE;
+  ctx.fillStyle = COLOR.WHITE;
+  ctx.beginPath();
+  ctx.arc(x + half, y, 3, 0, Math.PI * 2);
+  ctx.fill();
 }