ipycanvas w/o jupyter/notebook

[mazer-ai]

This might be a completely ridiculous question since I still don't really understand the jupyter<->python interaction mechanisms for displaying things in cells -- but I'm wondering if there's any way to use ipycanvas independent of the Jupyter notebook? Basically I'd like to just display an ipycanvas in a running browser window -- served from a standalone python/ipython program. I was thinking that perhaps there's a way to do this using flask? Or am I wasting my time on this because it's tightly coupled to the jupyter display system?
Thanks,
Jamie

[martinRenou]

Hi Jamie,

ipycanvas is indeed very coupled with Jupyter. Though you have ways to serve Jupyter Notebooks as "dashboard" applications using Voila. One example of this is in https://github.com/fastscape-lem/gilbert-board. You can try it on this page: https://mybinder.org/v2/gh/fastscape-lem/gilbert-board/master?urlpath=%2Fvoila%2Frender%2Fgilbert_board.ipynb.

[nmstoker]

I came here to ask a similar question, because i was wondering about the practicalities of using ipycanvas directly with Pyodide, thus enabling it to run in a browser from a static file.

I'm guessing that with Pyodide things are marginally better than for @mazer-ai 's scenario, because you would have s canvas directly available in the same browser that's running Pyodide but I'm also guessing there are still various ipywidget and other Jupyter dependencies that would need to be dealt with.

It's a shame, I'm trying to find a minimal drawing environment for Python with a very simple installation route and this feels pretty close but I guess I'd need to keep looking / pondering solutions

[martinRenou]

@nmstoker In case you don't know, if you're using Pyodide and have access to the DOM (not running from a web worker), you can definitely create a Web2DCanvas directly:

from js import document

canvas = document.createElement("canvas")
ctx = canvas.getContext("2d")

ctx.fillRect(...)

The API is a bit different than ipycanvas though.

but I'm also guessing there are still various ipywidget and other Jupyter dependencies that would need to be dealt with.

Yeah. In jupyterlite (pyodide based) we mock the jupyter server to provide a front-end version, but ipycanvas still communicates with this fake server and that adds a bit of overhead.

In the case of pure pyodide usage (no Jupyterlite), we could probably re-implement the ipycanvas API so that it maps to the Web2DCanvas transparently to the user.

[nmstoker]

Thanks @martinRenou those details are helpful and I'm grateful for you taking the time to reply.

Sorry, I hadn't explained my aims that well earlier! I am aware of the ability to create a canvas directly but I was after something simpler / more Pythonic as it's for introducing Python to some learners and I was hoping to avoid going into JavaScript usage directly. It would be ideal to use the ipycanvas API as they may well end up using in Jupyter later so it would remain useful knowledge, thus avoids teaching something they would only use when in Pyodide. It's just a little thing but aspects like the ipycanvas API being in snake case help too.

With your last point, mapping the API transparently for the user would be ideal. If it might be a bit of a diversion for ipycanvas then maybe i should just explore that myself as a simple canvas module?

[martinRenou]

It would be ideal to use the ipycanvas API as they may well end up using in Jupyter later so it would remain useful knowledge, thus avoids teaching something they would only use when in Pyodide

Makes total sense 👍🏽

With your last point, mapping the API transparently for the user would be ideal. If it might be a bit of a diversion for ipycanvas then maybe i should just explore that myself as a simple canvas module?

It's a bit of of a diversion from current ipycanvas, it's true. Though I guess it could be good to have ipycanvas work seamlessly in the pyodide case :)

It'd be great if you start exploring this by yourself! And if that's ok with you, we could include this in ipycanvas

[nmstoker]

Sounds like a good approach. I'll have an initial explore to see what i can achieve and will report back in a couple of weeks 👍