Skip to content

Instantly share code, notes, and snippets.

@sdaitzman
Forked from korakot/draw.py
Created October 12, 2021 12:17
Show Gist options
  • Save sdaitzman/4a2dbfd6ff38b90d9cc468be1ecb9265 to your computer and use it in GitHub Desktop.
Save sdaitzman/4a2dbfd6ff38b90d9cc468be1ecb9265 to your computer and use it in GitHub Desktop.
Drawing on Google Colab
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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment