canvas_ity

Author here. I have a JavaScript port of my automated test suite (https://github.com/a-e-k/canvas_ity/blob/main/test/test.html) that I used to compare my library against browser <canvas> implementations. I was surprised by all of the browser quirks that I found! But compiling to WASM and running side-by-side on that page is definitely something that I've thought about to make the comparison easier. (For now, I just have my test suite write out PNGs and compare them in an image viewer split-screen with the browser.)

The list of "recommended reading" from one of the issues looks great: https://github.com/a-e-k/canvas_ity/issues/11#issuecomment-2...

There's a relatively straightforward trick that you can do here. If you've got a transform that turns a circle into an ellipse with the relative radii and orientation that you want, then: 1. Apply the inverse of that transform to your path. 2. Stroke the path. 3. Apply the transform to the result. This way, the path stays in place but the stroke is transformed to give it a calligraphic look. With a JavaScript Canvas, you can just set the transform after defining the path, but before stroking. JSFiddle example: [0]. (This was something that I tested in my tiny, single-header <canvas>-like 2D rasterizer library for C++ and my Javascript port of its test suite [1].) For Inkscape, I think you can convert an object to a path, apply the inverse transform, do a minimal simplification to bake the transform into the path, stroke it, and then app

I'm the author of another CPU-only 2D vector graphics library that might be of interest: - Canvas Ity (https://github.com/a-e-k/canvas_ity) It's a tiny single-header C++ library in the style of the STB libraries. My aim was to make it dirt simple to be able to drop into almost any project and get high-quality rendering while providing an API comfortable to those used to <canvas>. I've been checking out Blend2D every now and then. It seems like a very nice option for the bigger, but faster and more fully-featured end of the spectrum. (Though for what it's worth, while raw performance isn't my priority, my little library still can hit about 70fps rendering the Postscript Tiger to 733x757 res with a single thread on my 7950x. :-)

I have a small TTF implementation in C++ that's only a little bigger than that and is open source. It's part of my canvas_ity single-header library [0] that's around 2300 LOC / 36 KB object size and implements a C++ version of most of the 2D HTML5 canvas spec [1]. The core implementation of the TTF parsing and drawing is in L1526-L1846 with another small bit at L3205-L3274 of src/canvas_ity.hpp. It's something of a toy implementation that only supports western left-to-right text, and doesn't do any hinting at all, nor kerning, nor shaping. But it's enough to draw a basic "Hello world!" using any typical TTF file. The test suite in test/test.cpp L84-304 embeds a few custom Base64-encoded TTF files. They're small and only have a few glyphs but they do exercise a number of interesting edge cases in the OpenType TTF spec [2]. Have a look

Agreed, that sort of documentation is pure gold when done well. It's something I always try to pay forward by doing in my own code. For example, one of my own lone-developer projects was an STB-style single-header <canvas>-like rasterizer library for C++. I started the implementation half of the library with a short overview of the rendering pipeline's dataflow and the top-level functions responsible for each stage: https://github.com/a-e-k/canvas_ity/blob/f32fbb37e2fe7c0fcae...

https://github.com/a-e-k/canvas_ity A tiny, single-header <canvas>-like 2D rasterizer for C++ More detail -- This is an STB-style single-header C++ library with no dependencies beyond the standard C++ library. In about 2300 lines of 78-column code (not counting blanks or comments), or 1300 semicolons, it implements an API based on the basic W3C <canvas> specification to draw 2D vector graphics into an image buffer: - Strokes and fills (with antialiasing and gamma-correct blending) - Linear and radial gradients - Patterns (with repeat modes and bi-cubic resampling) - Line caps and line joins (handling high curvature) - Dash patterns and dash offsets - Transforms - Lines, quadratic and cubic Beziers, arcs, and rectangles - Text (very basic, but does its own TTF font file parsing!) - Raster images (i.e., s

I've done this. For a project where I didn't want any external dependencies, I wrote an uncompressed PNG writer for RGBA8 images in a single function. It's just over 90 lines of C++: https://github.com/a-e-k/canvas_ity/blob/f32fbb37e2fe7c0fcae...

Hi HN! After a few years of off-and-on work on it, I'm pleased to release my canvas_ity library as open source. TLDR: This is a single-header C++ library with no dependencies beyond the standard C++ library. In about 2300 lines of 78-column code (not counting blanks or comments), or 1300 semicolons, it implements an API based on the basic W3C <canvas> specification to draw 2D vector graphics into an image buffer: - Strokes and fills (with antialiasing and gamma-correct blending) - Linear and radial gradients - Patterns (with repeat modes and bi-cubic resampling) - Line caps and line joins (handling high curvature) - Dash patterns and dash offsets - Transforms - Lines, quadratic and cubic Beziers, arcs, and rectangles - Text (very basic, but does its own TTF font file parsing) - Raster images (i.e., sprites) - Clipping (via masking) - Co