Template:Canvas

The following documentation is located at Template:Canvas/doc. [<Edit> Template:Canvas/doc]
[⧼Purge⧽ Template:Canvas]

The {{canvas}} graphic template is used to draw a graphic or an illustration. The canvas provides a relative positioned block that is required for absolute positioning of its drawn content elements (using graphic templates and affine transforms templates).

The origin (0, 0) is taken at the bottom left corner of the canvas, with positive coordinates rightwards and upwards from the origin. (This convention, which conforms to the mathematical convention, is more convenient than the top left origin used with HTML.)

Usage

{{canvas | id = ''id'' | title = ''title'' | caption = ''caption'' | width = ''width'' | height = ''height'' | units = ''units'' | float = ''float'' | background = ''background'' | border = ''border'' |<!-- ************************************************************************** * * * ALL spaces and newlines MUST be commented out! * * (Otherwise those spaces and newlines create havoc with the graphic!) * * * ************************************************************************** -->''first graphic template call with/without affine transform template call''<!-- -->''second graphic template call with/without affine transform template call''<!-- -->''third graphic template call with/without affine transform template call''<!-- -->'' (...) ''<!-- -->''last graphic template call with/without affine transform template call''<!-- -->}}

where:

• id is an (optional) identifying name for this canvas;
• title is an (optional) title displayed (centered) above the canvas;
• caption is an (optional) text caption displayed (aligned left) below the canvas;
• width is canvas width in units (default is 16*40);
• height is canvas height in units (default is 9*40);
• units is among %, px, cm, mm, in, pt, pc, em, ex (default is px);
• float is among left, center, right (default is center);
• background is background style (default #f9f9f9, i.e. color     );
• border is border style (default solid 1px #f2f2f2, i.e. color     ).

Examples

Empty canvas (default)

{{canvas| title = A blank canvas! }}

yields

A blank canvas!

Empty canvas (custom)

{{canvas|width = 300|height = 300|float = right
|background = #f9f9a9|border = dotted 1px black
|title = A yellow canvas!
|caption = Yellow canvases are blah, blah, blah, ...
}}{{clear}}

yields

A yellow canvas!

Yellow canvases are blah, blah, blah, ...

Canvas (with graphic elements and affine transforms)

Warning: ALL spaces and newlines MUST be commented out! (Otherwise those spaces and newlines create havoc with the graphic!)

Note: Borders of graphic elements are drawn on the outside of their bounding boxes.

Code

Result

{{canvas| width = 600 | height = 400 | float = right |<!-- -->{{ellipse| center = 500, 350 | semi-axes = 100, 50 | units = px | stroke = 3px solid orange }}<!-- -->{{polygon| 3 | 0, 0; 100, 50; 200, 0; | units = px | stroke color = red }}<!-- -->{{translate|<!-- -->{{polygon| 3 | 0, 0; 100, 50; 200, 0; | units = px | stroke color = green }}<!-- -->| 200, 200 }}<!-- -->{{polygon| 3 | 0 + 200, 0; 100 + 200, 50; 200 + 200, 0; | units = px | stroke color = blue }}<!-- -->{{polygon| 3 | 0, 0 + 200; 100, 50 + 200; 200, 0 + 200; | units = px | stroke color = purple }}<!-- -->{{translate|<!-- -->{{polygon| 4 | 0, 0; 0, 200; 200, 200; 200, 0; | units = px | stroke color = black | stroke width = 4 }}<!-- -->| 400, 200 }}<!-- The medium bordered translated yellow square should be in the center of the large black square. -->{{translate|<!-- -->{{polygon|4| 0, 0; 0, 100; 100, 100; 100, 0; | units = px | stroke color = yellow | stroke width = 3 }}<!-- -->| 450, 250 }}<!-- The thick bordered rotated orange square should be in the center of the large black square. -->{{translate|<!-- -->{{rotate|<!-- -->{{polygon|4| 0, 0; 0, 100; 100, 100; 100, 0; | units = px | stroke color = orange | stroke width = 5 }}<!-- -->|45|origin = 50% 50% }}<!-- -->| 450, 250 }}<!-- -->}}

Tests

See {{canvas/Test}}.

Code

<noinclude>{{Documentation}}</noinclude><includeonly><!--

  The origin (0, 0) is taken at the bottom left corner of the canvas, with positive coordinates rightwards and upwards from the origin.   

  Commented out HTML5 tags (since not supported by MediaWiki version used by OEIS Wiki): 

    <canvas>...</canvas>

--><!--<canvas>-->{| id="{{{id|}}}" class="canvas" align="{{{float|center}}}" cellspacing="0" cellpadding="0" style="position: relative; width: {{#expr: {{{width|16*40}}} }}{{{units|px}}}; height: {{#expr: {{{height|9*40}}} }}{{{units|px}}}; background: {{{background|#f9f9f9}}}; border: {{{border|solid 1px #d2d2d2}}}; color: black;"
|+ {{{title|}}} 
|-
| style="text-align: left; vertical-align: bottom;" | {{{1|}}}
|-
|}<!--</canvas>--></includeonly>

See also

Drawing templates

• {{Canvas}}

• {{Draw text}}
• {{Image}}

• {{Point}}
• {{Line}}

• {{Square}}
• {{Round square}} ({{rounded corners square}})
• {{Rect}} ({{rectangle}})
• {{Round rect}} ({{rounded corners rectangle}})

• {{Polyline}}
• {{Polygon}} ({{closed polyline}})
• {{Regular polygon}}

• {{Circle}}
• {{Ellipse}}

Affine transforms templates

See Help:CSS Transforms.

• {{Origin}}

• {{Translate}} and {{transform-translate}}
• {{Flip}}
• {{Scale}} and {{transform-scale}}

• {{Rotate}} and {{transform-rotate}}
• {{SkewX}}
• {{SkewY}}
• {{Skew}} and {{transform-skew}}

• {{Affine}} ({{affine matrix}})