#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;
}
<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>
Instagram Engineering
Shopify Engineering