Single clicks/taps do not create marks in Quarto RevealJS Chalkboard or Notes Canvas

[snhansen]

Description

I'm experiencing an issue with the Chalkboard and Notes Canvas plugins in Quarto RevealJS presentations.

When using either the Chalkboard or Notes Canvas, a simple click or tap does not create a mark. I have to click and drag, moving the pointer a certain distance, before anything is recorded on the canvas. This makes hard for me to e.g. "dot an i".

What I've tested:

It occurs in both Chalkboard and Notes Canvas.

I've tried changing the Chalkboard configuration (marker width, chalk width, theme, and chalk effect) which didn't resolve the issue.

Questions:

Is this the expected behaviour of the RevealJS Chalkboard and Notes Canvas plugins?

Is there a configuration option to make a single click or tap register as a dot?

If not, is there a JavaScript workaround or a way to modify the plugin to support click-to-draw functionality?

I'd appreciate any suggestions or solutions!

[dgesteves]

Yes, that's how the plugin works, and there's no option to change it. A press only stores the start point (startDrawing), and the first stroke is drawn by the next mousemove or touchmove. No movement, no mark, which is why marker width, theme and chalk effect made no difference. The plugin's author said the same upstream: "my implementation requires at least a small move".

You can get dots without modifying the plugin by sending it a tiny move as soon as the pen goes down. Save this as chalkboard-dots.html next to your .qmd:

<script>
// The chalkboard plugin only draws on mousemove/touchmove, so nudge it by a
// fraction of a pixel as soon as the pen goes down. It then records a normal
// stroke, and a click or tap leaves a dot.
function chalkboardDot(e) {
  if (!e.target.matches("canvas[data-chalkboard]")) return;
  const p = e.touches ? e.touches[0] : e;
  const pos = { pageX: p.pageX + 0.1, pageY: p.pageY };
  const move = new Event(e.touches ? "touchmove" : "mousemove", { bubbles: true });
  if (e.touches) move.touches = [pos];
  else Object.assign(move, pos);
  e.target.dispatchEvent(move);
}
document.addEventListener("mousedown", chalkboardDot);
document.addEventListener("touchstart", chalkboardDot);
</script>

format:
  revealjs:
    chalkboard: true
    include-after-body: chalkboard-dots.html

I ran this on Quarto 1.11.9 in Chromium, WebKit and Firefox through Playwright, with clicks and emulated taps. Without the script a click leaves 0 pixels on both canvases. With it you get a dot on the notes canvas and the chalkboard, and because it goes through the plugin's own drawing code it's recorded like any other stroke: the notes canvas dot was still there after going to the next slide and back.

I haven't tried it on a physical tablet or stylus. If a tap still doesn't mark on your device, tell me which browser you're on and whether it's touch, pen or mouse.

[snhansen]

Thanks for the reply, @dgesteves. I've tried your plugin and it makes a world of difference for me. I've tested it on a drawing tablet connected to the computer which also works. It's not perfect but definitely a big improvement. For instance, you still can't draw circles with a very small diameter. It's like mouse movements have to be above some quantity for it to be picked up. I wonder if that's something which can be overridden.

[mcanouil]

@snhansen If you have access to an LLM, it should be easy to adapt the LLM-assisted snippet provided above to fill that last usage gap.

The changes could also be suggested upstream: https://github.com/rajgoel/reveal.js-plugins/blob/master/chalkboard/README.md
The plugin code: https://github.com/rajgoel/reveal.js-plugins/blob/master/chalkboard/plugin.js

[snhansen]

It's weird because the issue of "small circles don't get detected" is only a thing when I use a pen on my drawing tablet, not when I use the mouse directly. However, I'm able to draw just fine in e.g. Paint with both the mouse and the drawing tablet. So not sure where that leaves me in terms of diagnosing the issue.

[mcanouil]

Interesting that it only happens with the pen. My guess is it's down to how the OS/browser (Windows Ink on Windows) handles pen input rather than the app itself: pens are often routed through the OS's touch/ink layer and translated into touch or mouse events with a movement tolerance, so a small target can be missed if the tip jitters slightly during the tap. Paint talks to the native pen APIs directly, so it wouldn't be affected the same way.

It might be worth checking whether pointerdown/pointerup fire at all for the pen (pointerType: "pen"), and whether the behaviour changes in another browser or with the tablet driver's OS-ink/pen-API option toggled (if it has one).