Circuit Canvas

Description

I teach electronics and I need to draw a lot of circuits. Sometimes to design a prototype of something. Other times to just reply to a question with a quick schematic. It started out as just images imported into inkscape. Then I turned it into a web app. I'm now where it works pretty well and is usable.

It's kind of similar to fritzing, just web-based, and in my (very non-partial) view, it's quicker and easier to use and gives a prettier result =)

You can test it out here: https://circuitcanvas.com/

Details

An app to make it easy and fast to draw good-looking circuits. It has two modes; Schematic and Layout.

Schematic is for drawing schematics (duh).

Layout is for drawing how to connect the circuit. It could be on a breadboard, similar to Tinkercad and Fritzing. It could be on a perfboard/stripboard/veroboard. It could be without any board at all, just wires.

It's also possible to share your circuits with others so that they can check them out or duplicate them to make their own version. I'm planning on making it possible that multiple people can work on the same project (like with Google docs), but need to fix more basic stuff first.

Click here to check out my knight rider circuit in Circuit Canvas.

Project Logs

Collapse

Dragging of components with wires
Øyvind • 09/25/2024 at 13:48 • 0 comments

Circuit Canvas now has smooth dragging of lines! This means that the connections follow along as you drag a component. It only works in schematic mode for now, and it only works when you drag one component at a time. Will implement on multiple components and in Layout soon.
Panning function and library show/hide
Øyvind • 07/19/2024 at 08:17 • 0 comments

You can now show/hide the library. Useful when you're working with larger designs:

And I finally got around to adding basic panning functionality. Hold the center mouse button down to pan with your mouse:
Folders finally working
Øyvind • 07/10/2024 at 18:03 • 0 comments

I've had the possibility to create folders for a while, but you couldn't actually place projects into folders 😅 Well, now you can! And it makes a huge difference in keeping your projects organized.
How to design your own custom parts
Øyvind • 06/28/2024 at 09:33 • 0 comments

Designing a custom part is easy: Just draw your component as a vector file. I recommend using Inkscape which can be downloaded for free from this link.

To make the component work with the grid in Circuit Canvas, set your document grid to 5px for schematic components, or 2.5px for layout components. And set the scaling to 1. All units must be in pixels.

I've written up documentation with all the details on how to do it here.
Dragging components with wires
Øyvind • 06/28/2024 at 09:31 • 0 comments

You can now drag components that have wires connected to it, and the wires will follow. This is very useful when you want to make small tweaks to the placement of a component.
This is the first version of this feature. And for now, it only changes the endpoint of the wire. I'll create another version soon where the whole wire will adapt as you drag a component, which will be even more useful.
Import Fritzing parts to Circuit Canvas
Øyvind • 06/28/2024 at 09:28 • 0 comments

Do you have custom components in Fritzing format? It's now possible to import fritzing parts into Layout mode of Circuit Canvas:

By the way - Fritzing writes on their website that their parts can't be used in other software and I respect that. So this import feature is meant for converting community parts that are shared openly or parts that you've made yourself, not for Fritzing's original parts.

I've also made a converter tool so you can convert to Circuit Canvas format, then make edits to it if needed.