50 | |
51 |
52 |
53 | ```c++
54 | #include
55 | #include
56 | // Include the library header and implementation.
57 | #define CANVAS_ITY_IMPLEMENTATION
58 | #include "canvas_ity.hpp"
59 | int main()
60 | {
61 | // Construct the canvas.
62 | static int const width = 256, height = 256;
63 | canvas_ity::canvas context( width, height );
64 |
65 | // Build a star path.
66 | context.move_to( 128.0f, 28.0f ); context.line_to( 157.0f, 87.0f );
67 | context.line_to( 223.0f, 97.0f ); context.line_to( 175.0f, 143.0f );
68 | context.line_to( 186.0f, 208.0f ); context.line_to( 128.0f, 178.0f );
69 | context.line_to( 69.0f, 208.0f ); context.line_to( 80.0f, 143.0f );
70 | context.line_to( 32.0f, 97.0f ); context.line_to( 98.0f, 87.0f );
71 | context.close_path();
72 |
73 | // Set up the drop shadow.
74 | context.set_shadow_blur( 8.0f );
75 | context.shadow_offset_y = 4.0f;
76 | context.set_shadow_color( 0.0f, 0.0f, 0.0f, 0.5f );
77 |
78 | // Fill the star with yellow.
79 | context.set_color( canvas_ity::fill_style, 1.0f, 0.9f, 0.2f, 1.0f );
80 | context.fill();
81 |
82 | // Draw the star with a thick red stroke and rounded points.
83 | context.line_join = canvas_ity::rounded;
84 | context.set_line_width( 12.0f );
85 | context.set_color( canvas_ity::stroke_style, 0.9f, 0.0f, 0.5f, 1.0f );
86 | context.stroke();
87 |
88 | // Draw the star again with a dashed thinner orange stroke.
89 | float segments[] = { 21.0f, 9.0f, 1.0f, 9.0f, 7.0f, 9.0f, 1.0f, 9.0f };
90 | context.set_line_dash( segments, 8 );
91 | context.line_dash_offset = 10.0f;
92 | context.line_cap = canvas_ity::circle;
93 | context.set_line_width( 6.0f );
94 | context.set_color( canvas_ity::stroke_style, 0.95f, 0.65f, 0.15f, 1.0f );
95 | context.stroke();
96 |
97 | // Turn off the drop shadow.
98 | context.set_shadow_color( 0.0f, 0.0f, 0.0f, 0.0f );
99 |
100 | // Add a shine layer over the star.
101 | context.set_linear_gradient( canvas_ity::fill_style, 64.0f, 0.0f, 192.0f, 256.0f );
102 | context.add_color_stop( canvas_ity::fill_style, 0.30f, 1.0f, 1.0f, 1.0f, 0.0f );
103 | context.add_color_stop( canvas_ity::fill_style, 0.35f, 1.0f, 1.0f, 1.0f, 0.8f );
104 | context.add_color_stop( canvas_ity::fill_style, 0.45f, 1.0f, 1.0f, 1.0f, 0.8f );
105 | context.add_color_stop( canvas_ity::fill_style, 0.50f, 1.0f, 1.0f, 1.0f, 0.0f );
106 |
107 | context.global_composite_operation = canvas_ity::source_atop;
108 | context.fill_rectangle( 0.0f, 0.0f, 256.0f, 256.0f );
109 |
110 | // Fetch the rendered RGBA pixels from the entire canvas.
111 | unsigned char *image = new unsigned char[ height * width * 4 ];
112 | context.get_image_data( image, width, height, width * 4, 0, 0 );
113 | // Write them out to a TGA image file (TGA uses BGRA order).
114 | unsigned char header[] = { 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0,
115 | width & 255, width >> 8, height & 255, height >> 8, 32, 40 };
116 | for ( int pixel = 0; pixel < height * width; ++pixel )
117 | std::swap( image[ pixel * 4 + 0 ], image[ pixel * 4 + 2 ] );
118 | std::ofstream stream( "example.tga", std::ios::binary );
119 | stream.write( reinterpret_cast< char * >( header ), sizeof( header ) );
120 | stream.write( reinterpret_cast< char * >( image ), height * width * 4 );
121 | delete[] image;
122 | }
123 | ```
124 |
125 |
126 | |
127 |
128 |
129 |
130 | ```html
131 |
132 |
133 |
134 | Example
135 |
136 |
137 |
138 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 | ```
203 |
204 |
205 | |
206 |
207 | 
2 |
3 | # canvas_ity
4 |
5 | [](../../../actions/workflows/tests.yml)
6 |
7 | This is a tiny, [single-header C++ library](../src/canvas_ity.hpp)
8 | for rasterizing immediate-mode 2D vector graphics, closely
9 | modeled on the basic [W3C (not WHATWG) HTML5 2D canvas
10 | specification](https://www.w3.org/TR/2015/REC-2dcontext-20151119/).
11 |
12 | The priorities for this library are high-quality rendering, ease of use, and
13 | compact size. Speed is important too, but secondary to the other priorities.
14 | Notably, this library takes an opinionated approach and does not provide
15 | options for trading off quality for speed.
16 |
17 | Despite its small size, it supports nearly everything listed in the W3C
18 | HTML5 2D canvas specification, except for hit regions and getting certain
19 | properties. The main differences lie in the surface-level API to make this
20 | easier for C++ use, while the underlying implementation is carefully based
21 | on the specification. In particular, stroke, fill, gradient, pattern,
22 | image, and font styles are specified slightly differently (avoiding strings
23 | and auxiliary classes). Nonetheless, the goal is that this library could
24 | produce a conforming HTML5 2D canvas implementation if wrapped in a thin
25 | layer of JavaScript bindings. See the accompanying [C++ automated test
26 | suite](../test/test.cpp) and its [HTML5 port](../test/test.html) for a mapping
27 | between the APIs and a comparison of this library's rendering output against
28 | browser canvas implementations.
29 |
30 | ## :memo: Example
31 |
32 | The following complete example program writes out a TGA image file and
33 | demonstrates path building, fills, strokes, line dash patterns, line joins,
34 | line caps, linear gradients, drop shadows, and compositing operations. See
35 | the HTML5 equivalent of the example on the right (scroll the code horizontally
36 | if needed) and compare them line-by-line. Note that the minor differences
37 | in shading are due to the library's use of gamma-correct blending whereas
38 | browsers typically ignore this.
39 |
40 |