What Simple Drawings Actually Is
Simple Drawings is a lightweight JavaScript library for creating basic 2D graphics in the browser. It's not a full-featured canvas framework like Konva or Paper.js. It's closer to a thin wrapper that handles vector shapes, paths, and basic transforms without any of the overhead. You load it, grab a canvas element, and start drawing rectangles, circles, lines, and text. That's basically the whole pitch. I use it for internal dashboards where someone needs to visualize a chart or a schematic in real time. Not production-grade illustrations. Quick, functional graphics. The file size is roughly 18KB gzipped, which matters when you're loading it on a page alongside everything else. Rendering is straightforward. You create a context object, set a shape, set its properties, call render, and it appears. No scene graph to manage, no event system to wire up. Here's what I mean by that in practice. I spent two days trying to build a flow diagram using SVG for a monitoring tool. The DOM became a bottleneck. Every time I panned or zoomed, the browser was rebuilding elements. Switching to Simple Drawings cut that entire interaction from about 400ms to under 50ms on the same machine. The tradeoff is that you don't get built-in hit detection or a component hierarchy. You handle that yourself if you need it.
Getting It Running
You grab it from the GitHub repository or the npm package. The install is standard: npm install simple-drawings or pull the minified file from the releases page. Once it's in your project, you initialize it with a canvas reference. That's the entire entry point. The context object has methods for every basic shape: arc, line, path, text, and group. Transforms are chaining-based, which means ctx.translate(50, 50).rotate(Math.PI / 4).rect(...) applies sequentially. If you don't call render(), nothing shows up. That caught me off guard the first time because most libraries auto-flush on state changes. Simple Drawings doesn't. You have to be explicit about when the frame updates. By default, coordinates map directly to CSS pixels. If your canvas is 800 by 600, your drawing space is 800 by 600. There's no automatic device pixel ratio handling baked in, which is actually a feature. You control it. I always set the internal resolution to match the physical pixel density manually:
Without that, everything looks blurry on Retina displays. With it, the output is crisp. The library doesn't force a resolution on you, which means you have to remember to do it. I've seen three different implementations of this in the wild where people just skip that step and complain about quality. Static shapes, animated sequences where you control the frame loop, and batch rendering are where this thing shines. You can push hundreds of rectangles through the batch renderer in a single pass and it barely registers on the CPU. The batch mode bypasses the per-shape overhead and groups draw calls the same way a game engine would. For a data visualization that updates every few seconds, this is more than enough. The path system is also solid. You can construct bezier curves, close subpaths, and apply fills or strokes. Text rendering supports basic font properties and alignment. It's not going to give you kerning-perfect typography, but for labels on a chart, it works fine. I typically use a monospace font for coordinate readouts and a sans-serif for annotations.
Get the Full Details
A Problem I Ran Into
I was building a network topology viewer where nodes could be dragged and dropped. Simple Drawings doesn't include an input handler, which is fair — it's a drawing library, not a UI toolkit. So I wrote a custom pointer listener. The issue was that I was calculating the drag delta from the raw canvas coordinates without accounting for the canvas's offset on the page. Every time I moved a node, it jumped by the offset amount before settling. I fixed it by wrapping the pointer event coordinates with getBoundingClientRect() and subtracting the canvas's left and top values. This is a common pitfall with any canvas-based system, but Simple Drawings doesn't warn you about it anywhere in the docs. I spent about an hour debugging what I thought was a transform bug before I realized the coordinates were wrong from the start. The biggest one is the lack of built-in interactivity. No event system, no z-order management beyond the order you draw things, no text editing, no export beyond what you manually render. If you need a diagramming tool where users can click and edit shapes, this isn't it. You'd be better off with something like Excalidraw or a canvas framework with a component model.
Animation is also manual. There's no tweening engine or easing functions. You write the loop yourself. This isn't a weakness per se, it just means you need to bring that code. I usually pull in a lightweight easing library or write a simple linear interpolator. For simple fade-ins or position transitions, that's maybe twenty lines of code. Another limitation is that complex paths with many segments can cause performance issues on low-end devices. I tested a path with around 15,000 bezier control points and the frame rate dropped significantly on a Pixel 5. The library doesn't have a built-in simplification algorithm. I ended up using the Ramer-Douglas-Peucker algorithm to reduce the point count to about 800 before rendering. That restored acceptable performance without a visible loss in quality.
When to Skip It
If your project requires rich interactions — drag and drop, shape selection, context menus, undo/redo — then Simple Drawings will fight you at every step. You'd spend more time building around its gaps than using a more capable library. In those cases, go with something like Konva or even just raw Canvas API with a proper state manager. If you just need to draw shapes and update them, Simple Drawings is fast to set up and fast to run. The download is available on GitHub under the MIT license. The npm package is simple-drawings. The README has a basic API reference, but the source code is where you'll find the actual behavior. I recommend reading the src/context.js file to understand how transforms stack and when rendering actually happens. That's where most confusion comes from. I've been using this in production for about a year now across two different internal tools. It does exactly what it says and nothing more. That's why it works for us. When the requirements grew beyond basic shapes, we switched parts of the system to use raw canvas with a custom renderer. Simple Drawings still handles the static overlay layer. It's not a replacement for a full graphics engine, but it's the right tool when the task is simple and the timeline is short.
