MultiCanvas with a mix of Canvas and RoughCanvas layers

[martinRenou]

👇🏼

[WhatIThinkAbout]

Hi - I'm loving ipycanvas. It's enabled me to create animations for a medium article\jupyter notebook I'm currently writing on Reinforcement Learning.
One thing I'm trying to do at the minute that I'm struggling with, is to create a standard multi-layer canvas which contains my animations and then add a rough canvas over the top, to provide annotations. Is it possible to combine standard and rough canvases?

[WhatIThinkAbout]

I've just found an answer to my own question - I can create a rough canvas and then copy the image data from this to the multi-canvas, so I don't need to put both over the top.

canvas = MultiCanvas(n_canvases=2, width=64, height=64, sync_image_data=True) 
canvas[0].fill_style = 'orange'
canvas[0].fill_rect(0, 0, 64, 64) 
rough_canvas = RoughCanvas(width=64, height=64, sync_image_data=True)  
rough_canvas.fill_rect(0, 0, 64, 64)
---
image_data = rough_canvas.get_image_data( 0, 0, 64, 64)
canvas[1].put_image_data( image_data, 0, 0 )  
canvas

[martinRenou]

Hi! Thanks for asking your question here :)

First time I use this discussion thingy, are you able to open a discussion in the Q&A section? I wonder if everyone has the right to do that, it would be nice.

Very interesting use-case, I haven't thought of that. It seems that the public API does not allow this, but I should be able to easily change this for the next release.
As a workaround, you should be able to create your own MultiCanvas class that allows your use case:

from traitlets import List, Instance
from ipywidgets import widget_serialization
from ipycanvas import MultiCanvas, Canvas

class CustomMultiCanvas(MultiCanvas):

    _canvases = List(Instance(Canvas)).tag(sync=True, **widget_serialization)

    def __init__(self, canvases=[], *args, **kwargs):
        super(MultiCanvas, self).__init__(*args, _canvases=canvases, **kwargs)

Then you should be able to create it by passing your canvases to the constructor:

multi = CustomMultiCanvas((Canvas(), RoughCanvas(), Canvas()))

Disclaimer: I haven't tested it, but I suppose that would work

I've just found an answer to my own question - I can create a rough canvas and then copy the image data from this to the multi-canvas, so I don't need to put both over the top.

Yep, that works too. Just note that put_image_data would be slower than creating your own MultiCanvas class

[martinRenou]

Sorry, I complete missed the Q&A bit and just went straight to the main discussions

No worries, I am new to this thing too.

Your solution is cleaner IMO, but it will be slower in terms of performances due to put_image_data

[martinRenou]

Oh, maybe a faster solution would be to use draw_image(rough_canvas) instead of put_image_data, this way you also don't have to retrieve the rough_canvas image_data

[WhatIThinkAbout]

Your solution works and is probably better than mine, so I'll go with that thanks.

[WhatIThinkAbout]

Your 'draw_image' solution appears to be best of all. With it I can draw to a temporary rough canvas and then draw this directly onto my existing multi-canvases. This works all in one jupyter notebook cell, whereas with the image data method I was having to split it across 2 cells otherwise I was getting an "No image data, please be sure that sync_image_data is set to True" error.
And although it's not as elegant as the custom class method, it's a lot easier to implement.

[martinRenou]

Good :)

And although it's not as elegant as the custom class method

I would not call the custom class elegant, this solution was using private APIs so it's better if you avoid it.

I'll try to make the changes so it's easier to achieve what you want.