Canvas Element

Canvas - the FlightGear 2D drawing API
Canvas - Main Page Canvas News - for the latest developments Shiva Alternatives - ongoing work for Core Profile support Canvas Efforts - projects using the Canvas system Canvas FAQs - frequently asked questions Canvas - Getting started Canvas Development (core) Canvas Troubleshooting (core) Canvas Sandbox (core) PUI2Canvas (PUI/XML Parser) Canvas GUI Canvas Widgets Canvas Maps Canvas Snippets
RFC
Canvas Instancing Howto:New Canvas Execution Model Canvas SVG Canvas Popout Windows Canvas Scenery Overlays
Frameworks
Canvas Map API (soon deprecated!) Canvas MapStructure Canvas MapStructure Layers MapStructure Snippets Canvas Radar Canvas Animation Framework (WIP) Canvas Plotting Framework (WIP) Canvas MFD Framework Canvas ND Framework Canvas PFD Framework Canvas MCDU Framework Canvas EFB Framework Canvas Wrappers Canvas Glass Cockpit Efforts
Tutorials
Howto:Getting started with Canvas Howto: Canvas Troubleshooting Howto:Adding a canvas to a GUI dialog (PUI!) Howto:Creating a Canvas GUI dialog file (New) Howto:Dynamic Liveries via Canvas (new) Howto:Creating a Canvas GUI Widget Howto:Add a 2D canvas instrument to your aircraft Howto:Parsing 2D Instruments using the Canvas Howto:Creating fullscreen Canvas applications Howto:Use SVG inside a Canvas Howto:Extend the Canvas SVG module Howto:Serializing a Canvas to SVG Howto:Canvas applications as Nasal submodules Howto:Using raster images and nested canvases Canvas HUD Howto:Project 3D to 2D coordinates on desktop canvas
Reference
Canvas Element Group Image Map Path Text Canvas Nasal API MessageBox Layout System Canvas GUI API Canvas draw library Event Handling
Related
Canvas Properties Unifying the 2D rendering backend via canvas Howto:Use a Camera View in an Instrument Howto:Extending Canvas to support rendering 3D models Howto:Extending Canvas to support MathGL
To be ported
Navigation display Map FGCanvas Canvas Nasal/JavaScript Subset
Deprecated by Canvas
Complex Glass Cockpit Avionics
(click on headings to toggle)

The canvas system is based on a handful of rendering primitives. All new canvas primitives need to implement the Canvas::Element interface, the canvas system currently supports the following primitives (see $SG_SRC/canvas/elements):

• CanvasText (mapped to osgText)
• CanvasPath (mapped to OpenVG, currently also used to render SVGs)
• CanvasImage (mapped to osg::Image)
• CanvasMap (automatic projection of geographic coordinates to screen coordinates)
• CanvasGroup (a group of arbitrary canvas primitives)

These primitives alone can already be used to create very sophisticated avionics and dialogs - however, depending on your needs, you may want to extend the canvas system to support additional primitives. Typically, you'll want to add new primitives in order to optimize performance or simplify the creation of more sophisticated avionics and/or dialogs (e.g. for mapping/charting purposes). If you are interested in adding new primitives, please take a look at the sources in $SG_SRC/canvas/elements.

For example, there's been talk about possibly adding the following additional primitives at some point. However, none of these are currently a priority or being worked on by anybody:

• support for a vertical mapping mode (e.g. to create Vertical Situation Displays or flight path evaluation dialogs)
• support for rendering scenery cameras (e.g. for tail cameras or mirrors etc)
• support for ESRI shapefiles
• support for GeoTIFF files or terrain height profiles using the tile cache
• rendering 3D objects
• support for ortographic moving map displays (requires CompositeViewer Support)

If you are interested in working on any of these, please get in touch via the canvas sub forum first.

Properties

z-index

• Format: <number> (Integer)
• Default: 0

Change order in which elements are drawn. Elements with higher z-index are drawn later and cover allready drawn elements on overlapping parts.

# Draw before all elements (if no z-index of the other elements is lower than zero)
el.set("z-index", -1);

# Ensure el2 is drawn before/below el1
el1.set("z-index", 51);
el2.set("z-index", 50);