basic canvas ipywidget that lets you draw lines

scribble_widget.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "from traitlets import Unicode, validate"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class ScribbleWidget(widgets.DOMWidget):\n",
    "    _view_name = Unicode('ScribbleView').tag(sync=True)\n",
    "    _view_module = Unicode('scribble').tag(sync=True)\n",
    "    _view_module_version = Unicode('0.0.0').tag(sync=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "require.undef('scribble')\n",
    "\n",
    "define('scribble', ['@jupyter-widgets/base', ], function(widgets) {\n",
    "    let canvas = document.createElement('canvas');\n",
    "    let colors = [\"Aqua\", \"Chartreuse\", \"Coral\", \"Fushsia\", \"DarkOrange\", \"LawnGreen\", \"Yellow\", \"Red\"];\n",
    "    canvas.width = \"400\";\n",
    "    canvas.height = \"300\";\n",
    "\n",
    "    let is_mouse_down = false;\n",
    "    let prev_coords = {x: 0, y: 0};\n",
    "    let cur_color = null;\n",
    "\n",
    "    function get_canvas_xy(e) {\n",
    "        let x = e.clientX;\n",
    "        let y = e.clientY;\n",
    "        let bound = canvas.getBoundingClientRect();\n",
    "\n",
    "        return {x: x-bound.left, y: y-bound.top};\n",
    "    }\n",
    "\n",
    "    canvas.addEventListener('mousedown', function(e) {\n",
    "        is_mouse_down = true;\n",
    "        prev_coords = get_canvas_xy(e);\n",
    "        cur_color = colors[Math.floor(Math.random()*colors.length)];\n",
    "    });\n",
    "\n",
    "    canvas.addEventListener('mouseup', function(e) {\n",
    "        is_mouse_down = false;\n",
    "    });\n",
    "\n",
    "    canvas.addEventListener('mousemove', function(e) {\n",
    "        if (!is_mouse_down) { return; }\n",
    "\n",
    "        let coords = get_canvas_xy(e);\n",
    "        let context = canvas.getContext('2d');\n",
    "        \n",
    "        context.strokeStyle = cur_color;\n",
    "        context.beginPath();\n",
    "        context.moveTo(prev_coords.x,prev_coords.y);\n",
    "        context.lineTo(coords.x,coords.y);\n",
    "        context.stroke();\n",
    "        \n",
    "        prev_coords = coords;\n",
    "    });\n",
    "            \n",
    "    \n",
    "\n",
    "    var scribble_view = widgets.DOMWidgetView.extend({\n",
    "        render: function() {\n",
    "            this.el.append(canvas);\n",
    "        },\n",
    "    });\n",
    "        \n",
    "    return {ScribbleView: scribble_view};\n",
    "})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "ScribbleWidget()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}