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
	Pen & Shape Color	Choose the color used by the pen and by shapes
(slider)	Pen Size	Adjust pen stroke thickness
	Undo	Undo the last stroke, shape, or erase on the current page
	Eraser	Open eraser options: freehand erase, select-area erase, delete all
(slider)	Eraser Size	Adjust the eraser’s diameter

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
	Select & Erase	Drag a rectangle to erase everything inside it
	Delete All	Clear the entire current page

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.5.2

• Lightened the pen/shape tool icon outline (added in 1.5.1) - it was rendering too thick

Version 1.5.1

• The pen and shape tool icons now match the selected pen color, with an outline so they stay legible at any color