Feature Request: Draw on Slides

[LauraRK]

I would really love the ability to write on my HTML slides as needed while presenting. I saw that Akkana Peck https://shallowsky.com/blog/speaking/drawing-on-slides.html was able to do that with her slide making code and I looked at her js files and tried to copy the appropriate parts and get it to work on my slides but I am not knowledable enough to make it work. I would love the shift D bring up a small ability to draw and then keep scrolling feature. I have tried a variety of solutions to this and none of them work the way I want them to, which is basically I want to draw and move on with out getting asked if I want to save anything or having my drawings stay present on the screen when I move to the next slide. I also like how her solution just has a little object with the colors and not a big obtrusive feature. I will continue trying to make it work but I think this would be a great thing to have in xaringanExtra. Thank you.

[mattwarkentin]

Okay, this is a bug. It was a last second change I made. Quick fix, one sec.

[rpruim]

Looks like you need a two argument function in your forEach()

[mattwarkentin]

Should be fixed. Please re-install and let me know!

[rpruim]

I had already fixed it locally as well, but I'll reinstall from your repo to double check.

[rpruim]

So is it time to close this and make new issues for specific issues (like the known bug about mis-alignment of pen and drawing)?

[mattwarkentin]

I think those discussions can happen in the PR thread once I submit it. I just wanted to get yours and @LauraRK's input first.

[rpruim]

Things are working locally, but if I push to github and serve with github.io, then I get errors:

GET https://rpruim.github.io/s341/S21/from-class/slides/libs/xaringanExtra-canvas/canvas.css net::ERR_ABORTED 404 Stat341-Day01.html:10 GET https://rpruim.github.io/s341/S21/from-class/slides/libs/xaringanExtra-canvas/canvas.js net::ERR_ABORTED 404 Stat341-Day01.html:11 Uncaught TypeError: window.xaringanExtraCanvas is not a function at Stat341-Day01.html:11

You can see the slide deck at https://rpruim.github.io/s341/S21/from-class/slides/Stat341-Day01.html

[mattwarkentin]

Did you also upload the libs folder (or whatever you named it)? Seems like the presentation can't find the CSS and JS resources.

[rpruim]

Indeed, I missed that when committing. (I had the libs folder from before, but missed adding the new bits.)

After waiting for github.io to catch up, it appears to be working.

Next up: try it on ipad. Stay tuned.

[rpruim]

Ipad seems to work.

My initial impression is that the drawing is more pixelated than in the first version that used fabric. Is that true, or just me not remembering correctly?

Seems like the main thing to fix now is the position/scaling issue so that you can draw where you mean to draw. As a temporary fix, is there an ideal aspect ratio to use that makes this least obvious? In particular, would there be a best aspect ratio to use if I wanted things to be full screen (need to figure out how to do that) on the ipad?

[mattwarkentin]

It may be more pixelated. There may be ways to improve upon this still (seems like there is, from doing some reading).

The benefit of fabric.js is that it turns your drawing into proper paths. This makes for nice looking lines. But the downside is that it is very tricky to erase since the line is a fully connected path, and not a series of connected dots. To erase a path, you would have to simultaneously clip the path and the point of the cursor and then somehow remove the disconnected path. This is why the default "erase" functionality for fabric.js is to just paint over the path with white paint (or whatever colour the canvas is). This won't work for our purposes since that would just obfuscate the slide content underneath the canvas.

Thankfully, the default <canvas> has support for proper erasing. I thought proper erasing was an important enough feature that I made the choice to build my own drawing tool, rather than reverse engineer some erasing tool for fabric.js.

[rpruim]

That makes sense.

It would be nice to get some proper erasing into fabric.js -- that would make everything easier.

Is the scaling issue one that just needs time, or are there some head scratchers there?

[rpruim]

I think I have found another bug. In Chrome on my mac, when I switch colors, the first stroke remains in the old color. Then next and subsequent ones use the new color.

This doesn't happen on my ipad, but there is also a different color chooser widget. So this might be determined by the browser's color picker.

[mattwarkentin]

Is the scaling issue one that just needs time, or are there some head scratchers there?

A bit of a head-scratcher, but I think I am on the right track.

when I switch colours, the first stroke remains in the old colour

I think this happens, I'm guessing, because you started drawing after you selected a new colour, but you hadn't "clicked off" of the colour picker. So in the instant you start drawing the new colour isn't registered yet. But it is registered immediately after so it works by the time you draw a second line. If you just click off of the picker without trying to draw, it should work as expected.

[rpruim]

Regarding colors: I think that color behavior is not ideal -- it feels very unnatural. But it may not be not really be xaringan's problem to fix. As I mentioned, on my ipad, I don't have to do anything to end my color choice, I can just start drawing. So this may be a bug/feature of the color-picker that gets used.

But if there were an easy way to make the intuitive behavior work, that would be nice.

Good luck with the scaling issues. That's really the only remaining thing to have this be useable. The rest is enhancements.

[mattwarkentin]

Regarding colors: I think that color behavior is not ideal

You are right - and I found a simple way to fix it. It should work as expected if you install the dev version. Thanks for the suggestion!

[rpruim]

Just gave the color switching a test. Seems to be working. :-)

[Cameron-Fairfield]

Just tried this today. Mostly working great. Main issue is misaligned cursor and pen outputs. I have to click above and to the left of where I want to draw by quite a bit. If I trace a letter in a title when on my second screen (slightly wider monitor) it appears quite far to the right and below cursor, if I then move window to my laptop with smaller screen the difference is much less significant but still there. I guess that screen size and aspect ratio may be the problem?

[mattwarkentin]

Thanks for trying it out, @Cameron-Fairfield! We are actively working on improving this feature in #87. So stay tuned for a much improved version in the near future.

[gadenbuie]

Closed in #87 🥳