explaingit

memononen/nanovg

★ 5,629CAudience · developerComplexity · 3/5LicenseSetup · moderate

TLDR

NanoVG is a small, stable C library for drawing smooth 2D vector graphics with OpenGL, shapes, text, and images with an API similar to the HTML5 canvas.

Mindmap

mindmap
  root((nanovg))
    What it does
      2D vector graphics
      OpenGL rendering
      Smooth antialiasing
    API style
      Canvas-like API
      Paths and shapes
      Text and images
    Tech
      C library
      OpenGL 2 and 3
      stb bundles
    Use cases
      Game UI
      Data visualization
      Desktop apps
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Draw smooth, resolution-independent UI elements like buttons and panels in a game or desktop app using OpenGL.

USE CASE 2

Render antialiased charts, graphs, or data visualizations on top of an OpenGL surface.

USE CASE 3

Port canvas-based 2D drawing code from JavaScript to a native C application using NanoVG's familiar API.

Tech stack

COpenGLstb_truetypestb_image

Getting it running

Difficulty · moderate Time to first run · 1h+

Requires an OpenGL context with a stencil buffer configured before NanoVG can render.

zlib license, use freely in any project including commercial products, with minimal restrictions.

In plain English

NanoVG is a small C library for drawing smooth, antialiased 2D vector graphics on top of OpenGL. It is designed for building user interfaces and data visualizations that need to scale cleanly across different screen sizes. The project is no longer actively maintained, but the code is stable and remains in use. The library's API follows the same general structure as the HTML5 canvas drawing API used in web browsers. You begin a path, define the shape using functions for rectangles, circles, ellipses, or freeform curves, set a fill color or stroke style, and then render it. Developers who have written canvas code in JavaScript will find the concepts familiar. NanoVG produces smooth edges through its own antialiasing approach built into the geometry rather than relying on the graphics card's multisampling. It works with several versions of OpenGL: 2.0, ES 2.0, 3.2 core profile, and ES 3. The render target needs a stencil buffer to function correctly. Text rendering and image loading are handled through companion libraries called stb_truetype (or freetype) and stb_image, which are bundled with the project. Drawing shapes with holes cut out requires a specific step. Because of how the back-end handles overlapping paths, you have to mark sub-paths as holes by calling a winding function after defining each hole shape. The documentation covers this with a short code example. Ports exist for DirectX 11, Metal, and bgfx, maintained by other contributors. The library is released under the zlib license, which allows use in commercial products without restrictions.

Copy-paste prompts

Prompt 1
Using NanoVG, write C code that draws a rounded rectangle with a gradient fill and a text label centered inside it using OpenGL.
Prompt 2
I want to render a pie chart using NanoVG. Walk me through how to draw filled arc segments with different colors and add text labels.
Prompt 3
How do I draw a shape with a hole cut out in NanoVG, what is the winding function and how do I use it correctly?
Prompt 4
Show me how to set up NanoVG with OpenGL 3.2 core profile and render my first frame with a circle and some text.
Prompt 5
I'm coming from HTML5 canvas. What are the NanoVG equivalents of beginPath, arc, fillStyle, and stroke?
Open on GitHub → Explain another repo

← memononen on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.