Close
0%
0%

Circuit Canvas

A web app that makes it easy to draw good-looking schematics, breadboard/soldering diagrams, or plain wiring diagrams.

Similar projects worth following
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/

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.

  • How to design your own custom parts

    Øyvind2 days ago 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

    Øyvind2 days ago 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

    Øyvind2 days ago 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.

View all 3 project logs

  • 1
    How to add components

    To add a component to the canvas, click it or drag it from the component library onto the canvas.

  • 2
    How to move and rotate components

    To move a component, hold your mouse pointer over it and press "m", or simply drag it:

    To rotate a component, hold your mouse pointer over it and press "r":

  • 3
    How to draw wires

    To start drawing a wire, click on the pin of a component or press "w". To finish drawing click on another pin (or double click outside of a pin):

View all 5 instructions

Enjoy this project?

Share

Discussions

Similar Projects

Does this project spark your interest?

Become a member to follow this project and never miss any updates