Pizarra-nb

This is a Jupyter notebook extension that creates a canvas of a cell and allows to paint onto the contents so it could be used to explain some concepts in an interactive way without the need to use a blackboard.

See an example below:

THIS IS TESTED ONLY IN FIREFOX WITH THE LATEST VERSION OF NOTEBOOK. USE IT AT YOUR OWN RISK.

What is 'pizarra'?

Pizarra is the spanish word for blackboard, whiteboard, greenboard.

Motivation

I have to give workshops, lessons, classes,..., in some of them there isn't a blackboard available to explain some concepts so, why not something available from the notebook itself?

Features

You can use:

a pen to draw over the cell, you can select the size, color and transparency.
you can undo an action.
you can redo an action.
you can save the result of the cell and your drawings as a png file in your disk drive.
you can save the result of the cell and your drawings as an image included in a new cell below the used cell.
you can reset the canvas so you can start again.

How it works?

After clicking the toolbar button (see video above) the selected cell is transformed to a HTML5 canvas using html2canvas (see next section). This canvas is included in a HTML div element and some functionality is added with the help of a modified version of sketchpad (see Third party libs used section). The final result is shown in a dialog where you can interact with the converted cell.

I've tested images, latex formulas, code cells, markdown cells,... If it is in the notebook it seems is working. If you use, for instance, an image from other server it will not work.