Qdraw Example

Click the drawing (top-left) icon to start experimenting

Video Demo

Installation

quarto add mahmudstat/qdraw

and add the plugin to your yaml in the the following way:

---
title: "Qdraw Example"
format:
  revealjs: default
revealjs-plugins:
  - qdraw
---

Updating

quarto update mahmudstat/qdraw

This pulls the latest version of the extension and overwrites your local _extensions/qdraw folder. See the News slide for what’s changed in each version.

Then render the qmd afresh.

Using

• Add your contents to qmd file and render.
• Click on the draw icon to activate the drawing tools.
• Click the icon again to hide the tools and move on to the other slides.
• Use the self-explanatory tools as per your requirements.

Icons — Toolbar (Drawing)

Icon	Tool	What it does
	Toggle Drawing	Show or hide the whole toolbar
	Pen	Switch to freehand pen drawing, and open pen options: 5 fixed stroke widths (thin to thick) and the color picker
	Undo	Undo the last stroke, shape, or erase on the current page
	Eraser	Switch to freehand erase, and open eraser options: erase mode, select-area erase, delete all, and 5 fixed eraser sizes

Icons — Pen Options

Icon	Option	What it does
(line)	Pen & Shape Size	5 fixed stroke widths, thin to thick
	Pen & Shape Color	Choose the color used by the pen and by shapes

Icons — Toolbar (Canvas & Navigation)

Icon	Tool	What it does
	Shapes	Open shape options: line, rectangle, triangle, ellipse, circle, solid fill
	Background	Open background options: choose color, reset
	Pages	Open page navigation: previous, next, add page
	Download	Save the current page as a PNG
	About	Show a popover linking to the qdraw site
	Move Controls	Move the toolbar to the opposite screen edge (only shown while drawing tools are active)

Icons — Eraser Options

Icon	Option	What it does
	Eraser	Erase by dragging over strokes (active by default when the eraser tool is clicked)
	Select & Erase	Drag a rectangle to erase everything inside it
	Delete All	Clear the entire current page
(dot)	Eraser Size	5 fixed eraser diameters, thin to thick

Icons — Shape Options

Icon	Option	What it does
	Line	Draw a straight line
	Rectangle	Drag corner to corner
	Triangle	Drag corner to corner
	Ellipse	Drag corner to corner
	Circle	Drag from the center outward
	Solid Fill	Toggle filled vs. outline shapes

Icons — Background & Page Options

Icon	Option	What it does
	Choose Color	Pick a background color for the canvas
	Reset	Reset the background to default (transparent)
	Previous Page	Go to the previous drawing page
1/2	Page indicator	Shows current page / total pages
	Next Page	Go to the next drawing page
	Add Page	Create a new blank page and switch to it

News

See the Older versions section of the README for earlier changes.

Version 1.7.0

• Replaced the pen-size and eraser-size sliders with 5 fixed sizes (thin to thick) to pick from: clicking the pen or eraser tool now opens its size options directly (pen sizes shown as stroke-width lines), and clicking the eraser tool activates freehand erase immediately instead of requiring an extra click
• Smoothed out freehand pen and eraser strokes, which used to look faceted/jagged on fast pointer movements
• Folded the pen & shape color swatch into the pen tool’s popover (alongside stroke size), and fixed both it and the background color swatch so their native color-picker dialogs always open next to the swatch, on whichever side the toolbar is currently moved to

Version 1.6.0

• Added quick-erase: right-click-drag with a mouse, or a resting palm on touchscreens, now erases with whatever tool is currently selected, without changing your tool selection