Canvas — Drawing and Pencil or Pen support

The settings of the brush can be adjusted through the excalidraw script pencil, and the delay will be significantly reduced after adjustment.

I really love the functionality on the Canvas in Obsidian. As some of the members have mentioned, it has its own unique notion and function, and does a great job of it.

The uniqueness in Obsidian is that it is able to bring about this great functionality across many devices (Mac/Desktop, iPad, iPhone etc) in the same unique way.

Canvas is a place where either we see the deck of notes at a 10,000 feet up, or just do a mind-dump for our next project (and a thousand other more!). And this high creativity zone, seen in the iPad experience (No keyboard on the train, just your Pencil, for instance), naturally tend to think, what if I could just draw arrows/lines, scribble a bit, write on my hand-writing etc. So that I could later organise or perhaps even (if your writing/scribbling is beautiful that is), make it to a presentation itself, for a cozy team-discussion!

So I believe, having the iPad Obsidian app Canvas writing/drawing functionality, with its bare-bone simplicity (perhaps scribble into its own objects, that later can be deleted, changed color in the Mac) would be a rather useful functionality.

The magic lives in how the simplicity is still maintained giving the fundamental iPad/Tablet experience via the great Obsidian Canvas!!

So I give this feature an enormous thumbs up!

3 Likes

The high demand to draw in Obsidian is actually visible, if we consider the ridiculous high download rate of Excalidraw. This is awesome!

I think the ability to draw inside Obsidian canvas would be useful for people transiting from analog to digital or for users who use both traditional and digital tools.

I would love to draw in Obsidian too, but not only to connect graph elements, but for quick sketches.

3 Likes

I hadn’t even considered this functionality being vector and within the free range of the canvas. I love it!

At the same time, I believe that some basic raster sketching abilities within canvas nodes would be quite useful and perhaps less involved to implement. Of course, neither excludes the other.

Thanks!

1 Like

Also, i see in canvas much more potential - it shouldn’t be a file, but a hub where users are able to manage their vault, similar as in a node editor. This way, mindmaps in Obsidian would get yet another depth! But i digress…

Talking about drawing, I was thinking more about bitmap than vector drawings, to keep it simpler for a first implementation.

(I brought up Excalidraw, because conceptually we were talking about drawing and how dramatic the demand for similar features is)

1 Like

@Jopp Nice! I agree. In terms of your mention of canvas as a node editor, check out this request: True link mode in Canvas to actually link notes, headings, etc…

Thanks!

1 Like

Bitmap (anything raster graphics, for that matter) might be tricky to edit. A vector, specifically SVG is at a whole another level, allows editing, smooth resizing etc.

I’d love the ability draw lines between reference images and concept art when planning a 3d project. I usually do this in photoshop and then bring it into pureref.

2 Likes

This wohld be cool i could see using it with my phone vault

+1. Please do consider this feature.

+1. I do need this feature.

1 Like

+1

The plugin Excalidraw should be able to make this possible, without too much effort I would guess.

Currently you have to create a new drawing, save it, then go to the note where you want to insert it, go to the line where you want it to be embedded, then insert the image of the drawing.

It would be great if you place your cursor on a line in the note where you want to have your drawing, then select a command “insert drawing”, it opens an empty drawing and after “saving” it will be inserted automatically on that line that you selected before.

3 Likes

Cannot draw on page to make understanding flow of information easier

I am trying have another tool for analyzation which doodles / pen support can achieve in Canvas mode. Imagine having a pen to use to draw better connections massive amounts of information in Canvas mode. It would be so helpful!

Add pen drawing to Canvas mode

Its simple. Add a vector based pen which comes in three colours of white/black, blue and red. You can select it when on Canvas mode and can switch between these colours. You can select three modes, mouse, pen and eraser.

I am using Excalidraw which is ugly, and bulky

Just the drawing feature is enough. Nothing else is needed. It should be simple as Obsidian should be. Excalidraw adds many complexities which are not needed and are slow.

5 Likes

Although I don’t have a tablet or means to use canvas with digital pen, I’d consider buying one if the admins integrated this as a native feature.

Also, check out Excalidraw. This plugin should be what you’re looking for

3 Likes

This is exactly what I am looking for. To integrate the drawing tool directly into canvas. To write on the canvas itself.

Another layer to this that would be exciting, is if when we wrote in canvas, it would be translated into text that would be recognized by the software.

1 Like

I made some css that allows for transparent images to be overlaid on the canvas. It feels like implementing some kind of drawing layer that saves into a transparent png or svg attachment isn’t too complicated from here.

Example

Example, here’s a node with text in the canvas:

Here I added an image with ink markup, using css for transparent background and no border.

Also using css to make the image always on top and clickthrough, so I can click the node underneath the markup and still edit it.

CSS

Here’s the css that makes the image node transparent, always on top, and clickthrough.

/* Make the node container background transparent 
and hide the border so we see through media with transparency */
.canvas-node-container:has(.canvas-node-content.media-embed.image-embed) {
    background-color: rgba(0, 0, 0, 0);
    border: unset;
}

/* For these canvas images, make them clickthrough and always on top */
.canvas-node:has(.canvas-node-container .canvas-node-content.media-embed.image-embed) {
    pointer-events: none;
    z-index: 999 !important;
}

When disabling clickthrough and border visibility (to allow moving the markup) another tweak can be increased transparency of the image borders so you can see the content underneath better

/* For canvas images, when selected, make the selection border more faint*/
.canvas-node.is-focused .canvas-node-container:has(>.canvas-node-content.media-embed.image-embed)  {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0.5px 1px 0.5px, rgba(138, 92, 245, 0.219) 0px 0px 0px 2px;
}

Implementation ideas

The implementation could be like:

  • have a button to enable ink markup
  • we could use some pretty simple javascript for drawing into SVG (for example try the code snippet in the top answer here: javascript - SVG smooth freehand drawing - Stack Overflow)
  • save the svg as an attachment in obsidian
  • add the svg to the canvas with the coordinates/scale as appropriate
  • apply css rules that canvas nodes for ink markup are transparent, and possibly clickthrough (maybe simply by detecting a filename prefix like _markup_{timestamp}.svg)

Maybe even there is just a single svg covering the whole area of the canvas, and you can toggle drawing in that layer on/off.

Or otherwise, we just need some really simple plugin that allow for inline image editing/markup. And some way to tag those specific images to trigger the desired css.

I tested transparent png and svg are fine.

3 Likes

I hope this could be added to the roadmap at some point.
There is this plugin GitHub - FBarrca/obsidian-handwritten-notes: Obsidian Handwritten Notes Plugin
But, at the end of the day you are using a external tool, and the integration to leverage all the obsidian power is missing

1 Like

I think it’s time to close this feature request based on the Obsidian team’s responses as of late, such as this one

I’m certain the Obsidian team will not be implementing pen support for Obsidian. This is and will remain a plaintext note-taking app meant for programmers.

For those who are interested in an app that supports plain-text and drawing support, I would look at AFFiNE. They’re also open-source, unlike Obsidian.

1 Like

That message is over a year old.
Generally, We don’t comment on what will or will not be implemented and when.

The only exception is the roadmap which contains a broad list of major new features to be implemented in the short or medium term.

1 Like

I wouldn’t hold my breath for this being implemented, IMO. I’d look at AFFiNE if I were you. I’ve started looking at it and experimenting with it a little and I’m definitely going to make the switch from Obsidian after I finish my degree. Their whiteboard feature is better than Obsidian’s and you can easily switch from document-view to whiteboard/canvas-view without having to create a new canvas (you can be writing something in document-view and then switch to whiteboard-view right away). Also, they’re open-source (Obsidian is not) which is great and there’s no learning curve with the tool, you can use it right out-of-the-box, you don’t need to install a plugin for accomplishing “this” or “that.” Also, you can export your notes to Markdown and you can use the tool locally. They’re also very, very responsive to questions from their users (just check out their discord server). Anyways, if drawing support is very important to your workflow, I would look at AFFiNE which is what I’ve started to do.