Last active
June 12, 2024 19:07
-
-
Save korakot/8409b3feec20f159d8a50b0a811d3bca to your computer and use it in GitHub Desktop.
Drawing on Google Colab
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
Hello, may I please ask how to load an image to the canvas first and then draw on it?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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