[Feature Request]: Add text & shapes on live share canvas

[ChalieChang1028]

Please review FAQ and Known issues before filing a new item!

• [V] I have reviewed the FAQ and known issues and did not find my topic

Please note: any submissions with insufficient reproducible information will be marked as 'Waiting for customer input' and may be closed is there is no response

Describe your user scenario
Hi, I am trying to use the samples provided for live-share-sdk ("samples\javascript\03.live-canvas-demo") as part of a teams meeting.Now, I can add strokes on the Canvas using buttons and the mouse.

However,It seems that InkingManager only manages strokes.
But besides strokes, can I manage and add text using the keyboard by InkingManager and have it displayed on the Canvas simultaneously?

[ryanbliss]

Hi @ChalieChang1028, great question. This is not something we support currently, but it's something we've considered along with other shapes (e.g., sticky notes, squares, rectangles, etc.). Can you please share more information about your use case?

P.S. Apologies for the delay, we've had a number of folks out of office for the summer and this somehow got missed.

[ChalieChang1028]

Hi, I noticed that in the demonstration image of the Live Share canvas, there are features like adding text and shapes. I’d like to know if it’s possible to add text and shapes to the whiteboard in the same way as shown in the image.


To add text: Select "Text" from the toolbar below, type the text using the keyboard, and place it on the whiteboard.
To add shapes: Select "Shapes" from the toolbar below, then use the mouse to drag and create a rectangle or circle and adjust its size.

[ryanbliss]

Hi, I noticed that in the demonstration image of the Live Share canvas, there are features like adding text and shapes. I’d like to know if it’s possible to add text and shapes to the whiteboard in the same way as shown in the image.

Hi @ChalieChang1028, yes, it is technically possible with Fluid Framework / Live Share. Microsoft's Whiteboard app is built atop Fluid Framework, for example. The LiveCanvas feature just doesn't support it out of the box. You'd have to add a separate <canvas> element below the LiveCanvas instance and use something like Fluid's SharedTree DDS (you can use versions^2.0.0-internal.8 of all our Live Share packages for that) or SharedMap to store the shapes, positions, and other associated metadata.

In the future, we would love LiveCanvas to support it out of the box. It's a pretty big task for us to make general purpose though, so in the interim you may want to consider a custom solution using SharedTree.