Drawing on Google Colab

draw.py

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'))
  }
})
</script>
"""

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)

This gist was very useful for part of my project with Pix2Pix models, and I found that collab has some difficulties in making things interactive.
So I made a modified version of this project but with color buttons. Hope it can be useful for other people, just copy/paste on collab that will work.

https://gist.github.com/rickkk856/6a2800cc84dd8fd456074e5a467edc47

Hello, this code was very useful for me.
However, you can't draw using your finger with a touchscreen, it only works with a mouse.
Is there a way to add this feature?
Thanks

I use your code and it could draw. However, the file write is incorrect because opencv couldn't load.

Hi everybody!
If you want to load the drawing from the file, fill the canvas with some background color, white for example, before you start drawing:

var ctx = canvas.getContext('2d')
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0, 0, canvas.width, canvas.height);

It solved the problem for me, hope it'll help you too

Hello, may I please ask how to load an image to the canvas first and then draw on it?