korakot · March 28, 2025 11:38 · Oct 5, 2018 · Oct 5, 2018
diff --git a/draw.py b/draw.py
@@ -34,6 +34,7 @@
     resolve(canvas.toDataURL('image/png'))
   }
 })
+</script>
 """
 
 def draw(filename='drawing.png', w=400, h=200, line_width=1):

diff --git a/draw.py b/draw.py
@@ -0,0 +1,45 @@
+from IPython.display import HTML, Image
+from google.colab.output import eval_js
+from base64 import b64decode
+
+canvas_html = """
+<canvas width=%d height=%d></canvas>
+<button>Finish</button>
+<script>
+var canvas = document.querySelector('canvas')
+var ctx = canvas.getContext('2d')
+ctx.lineWidth = %d
+var button = document.querySelector('button')
+var mouse = {x: 0, y: 0}
+
+canvas.addEventListener('mousemove', function(e) {
+  mouse.x = e.pageX - this.offsetLeft
+  mouse.y = e.pageY - this.offsetTop
+})
+canvas.onmousedown = ()=>{
+  ctx.beginPath()
+  ctx.moveTo(mouse.x, mouse.y)
+  canvas.addEventListener('mousemove', onPaint)
+}
+canvas.onmouseup = ()=>{
+  canvas.removeEventListener('mousemove', onPaint)
+}
+var onPaint = ()=>{
+  ctx.lineTo(mouse.x, mouse.y)
+  ctx.stroke()
+}
+
+var data = new Promise(resolve=>{
+  button.onclick = ()=>{
+    resolve(canvas.toDataURL('image/png'))
+  }
+})
+"""
+
+def draw(filename='drawing.png', w=400, h=200, line_width=1):
+  display(HTML(canvas_html % (w, h, line_width)))
+  data = eval_js("data")
+  binary = b64decode(data.split(',')[1])
+  with open(filename, 'wb') as f:
+    f.write(binary)
+  return len(binary)