Canvas: increase visual customization options

Use case or problem

When customizing Canvas using snippets, it is not possible to use CSS to target specific canvases or specific nodes in canvases. Additionally, adding a custom image as a background for a canvas is currently quite hacky and limited.

It would be extremely helpful to have more customization options for the Canvas, to allow for things like:

  • Different styling options for different canvases (unique backgrounds, custom node styling, color palettes)
  • hiding borders on specific nodes
  • hiding backgrounds on specific nodes
  • adding rotation to specific nodes
  • customizing node connections (not just color, but the path as well)

Proposed solution

  • Provide a method for assigning classes to individual canvases (similar to how the cssclass yaml allows individual notes to be assigned classes.
  • Provide a method for assigning classes to individual nodes in a canvas.
  • Provide a GUI method for rotating nodes.
  • Expose start and end coordinates of the path between nodes as attributes on the path element, to allow for precise manipulation of path styling with CSS.
  • Add a GUI method for assigning an image as a canvas background.

Current workaround (optional)

  • It is currently possible to create a (non-infinite) canvas background by assigning an image background to a pseudo-element of the element (to be clear, Iā€™m referring to a background that pans as if stuck to the nodes, not a static background that the nodes move around in front of.

Summary

To provide some context to these requests, it has become clear to be that Obsidian Canvas is already an extremely powerful tool capable of much more than just note-taking. With even some some basic additions to the customization options available, I am certain that it will provide a solution to an ever-increasing variety of use-cases.

7 Likes