Hacker News
Canvas_ity: A tiny, single-header <canvas>-like 2D rasterizer for C++
Hacker News · Feb 21, 2026 · Collected from RSS
Summary
Article URL: https://github.com/a-e-k/canvas_ity Comments URL: https://news.ycombinator.com/item?id=47103506 Points: 5 # Comments: 4
Full Article
#include <algorithm> #include <fstream> // Include the library header and implementation. #define CANVAS_ITY_IMPLEMENTATION #include "canvas_ity.hpp" int main() { // Construct the canvas. static int const width = 256, height = 256; canvas_ity::canvas context( width, height ); // Build a star path. context.move_to( 128.0f, 28.0f ); context.line_to( 157.0f, 87.0f ); context.line_to( 223.0f, 97.0f ); context.line_to( 175.0f, 143.0f ); context.line_to( 186.0f, 208.0f ); context.line_to( 128.0f, 178.0f ); context.line_to( 69.0f, 208.0f ); context.line_to( 80.0f, 143.0f ); context.line_to( 32.0f, 97.0f ); context.line_to( 98.0f, 87.0f ); context.close_path(); // Set up the drop shadow. context.set_shadow_blur( 8.0f ); context.shadow_offset_y = 4.0f; context.set_shadow_color( 0.0f, 0.0f, 0.0f, 0.5f ); // Fill the star with yellow. context.set_color( canvas_ity::fill_style, 1.0f, 0.9f, 0.2f, 1.0f ); context.fill(); // Draw the star with a thick red stroke and rounded points. context.line_join = canvas_ity::rounded; context.set_line_width( 12.0f ); context.set_color( canvas_ity::stroke_style, 0.9f, 0.0f, 0.5f, 1.0f ); context.stroke(); // Draw the star again with a dashed thinner orange stroke. float segments[] = { 21.0f, 9.0f, 1.0f, 9.0f, 7.0f, 9.0f, 1.0f, 9.0f }; context.set_line_dash( segments, 8 ); context.line_dash_offset = 10.0f; context.line_cap = canvas_ity::circle; context.set_line_width( 6.0f ); context.set_color( canvas_ity::stroke_style, 0.95f, 0.65f, 0.15f, 1.0f ); context.stroke(); // Turn off the drop shadow. context.set_shadow_color( 0.0f, 0.0f, 0.0f, 0.0f ); // Add a shine layer over the star. context.set_linear_gradient( canvas_ity::fill_style, 64.0f, 0.0f, 192.0f, 256.0f ); context.add_color_stop( canvas_ity::fill_style, 0.30f, 1.0f, 1.0f, 1.0f, 0.0f ); context.add_color_stop( canvas_ity::fill_style, 0.35f, 1.0f, 1.0f, 1.0f, 0.8f ); context.add_color_stop( canvas_ity::fill_style, 0.45f, 1.0f, 1.0f, 1.0f, 0.8f ); context.add_color_stop( canvas_ity::fill_style, 0.50f, 1.0f, 1.0f, 1.0f, 0.0f ); context.global_composite_operation = canvas_ity::source_atop; context.fill_rectangle( 0.0f, 0.0f, 256.0f, 256.0f ); // Fetch the rendered RGBA pixels from the entire canvas. unsigned char *image = new unsigned char[ height * width * 4 ]; context.get_image_data( image, width, height, width * 4, 0, 0 ); // Write them out to a TGA image file (TGA uses BGRA order). unsigned char header[] = { 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, width & 255, width >> 8, height & 255, height >> 8, 32, 40 }; for ( int pixel = 0; pixel < height * width; ++pixel ) std::swap( image[ pixel * 4 + 0 ], image[ pixel * 4 + 2 ] ); std::ofstream stream( "example.tga", std::ios::binary ); stream.write( reinterpret_cast< char * >( header ), sizeof( header ) ); stream.write( reinterpret_cast< char * >( image ), height * width * 4 ); delete[] image; } <!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <canvas id="example" width="256" height="256"></canvas> <script type="text/javascript"> const context = document.getElementById( "example" ).getContext( "2d" ); // Build a star path. context.moveTo( 128.0, 28.0 ); context.lineTo( 157.0, 87.0 ); context.lineTo( 223.0, 97.0 ); context.lineTo( 175.0, 143.0 ); context.lineTo( 186.0, 208.0 ); context.lineTo( 128.0, 178.0 ); context.lineTo( 69.0, 208.0 ); context.lineTo( 80.0, 143.0 ); context.lineTo( 32.0, 97.0 ); context.lineTo( 98.0, 87.0 ); context.closePath(); // Set up the drop shadow. context.shadowBlur = 8.0; context.shadowOffsetY = 4.0; context.shadowColor = "rgba(0,0,0,0.5)"; // Fill the star with yellow. context.fillStyle = "#ffe633"; context.fill(); // Draw the star with a thick red stroke and rounded points. context.lineJoin = "round"; context.lineWidth = 12.0; context.strokeStyle = "#e60080"; context.stroke(); // Draw the star again with a dashed thinner orange stroke. const segments = [ 21.0, 9.0, 1.0, 9.0, 7.0, 9.0, 1.0, 9.0 ]; context.setLineDash( segments ); context.lineDashOffset = 10.0; context.lineCap = "round"; context.lineWidth = 6.0; context.strokeStyle = "#f2a626"; context.stroke(); // Turn off the drop shadow. context.shadowColor = "rgba(0,0,0,0.0)"; // Add a shine layer over the star. let gradient = context.createLinearGradient( 64.0, 0.0, 192.0, 256.0 ); gradient.addColorStop( 0.30, "rgba(255,255,255,0.0)" ); gradient.addColorStop( 0.35, "rgba(255,255,255,0.8)" ); gradient.addColorStop( 0.45, "rgba(255,255,255,0.8)" ); gradient.addColorStop( 0.50, "rgba(255,255,255,0.0)" ); context.fillStyle = gradient; context.globalCompositeOperation = "source-atop"; context.fillRect( 0.0, 0.0, 256.0, 256.0 ); </script> </body> </html>
Share this story