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)

A handful of rendering primitives are available to draw on a canvas. Properties (see Property Tree for general information on FlightGear's property system) are used to control the appearance and behaviour of such Elements.

blend-*

Set OpenGL blend function. For a single function for all color channels (as with glBlendFunc) use the properties "blend-source" and "blend-destination". To set separate blend functions for the rgb and alpha channels (as with glBlendFuncSeparate) use the properties with "*-rgb" and "*-alpha" prefix.

• Format: "dst-alpha" | "dst-color" | "one" | "one-minus-dst-alpha" | "one-minus-dst-color" | "one-minus-src-alpha" | "one-minus-src-color" | "src-alpha" | "src-alpha-saturate" | "src-color" | "constant-color" | "one-minus-constant-color" | "constant-alpha" | "one-minus-constant-alpha" | "zero" (See the OpenGL Reference Pages for details)

Setting different blend functions for rgb and alpha:

# Standard alpha blending
el.set("blend-source-rgb", "src-alpha");
el.set("blend-destination-rgb", "one-minus-src-alpha");

# Just keep current alpha
el.set("blend-source-alpha", "zero");
el.set("blend-destination-alpha", "one");

clip()

Note  Scaling or any other type of transformation or changing the coordinates of individual points is definitely more efficient than clipping (which requires to change the OpenGL clip planes for every rendered object with a different clipping rectangle). — TheTom (Feb 21st, 2016). Re: Space Shuttle. (powered by Instant-Cquotes)

element.set("clip" [, format]);

Sets clipping rectangle for element and all its children. Only what is inside the clipping bounds will be shown.

format

Sets the format for the clipping. Accepted value are "auto" (default) and "rect(top, right, bottom, left)".

top

Caution format = "rect()" only

The distance of the top side of the clipping boundary from the upper canvas boundary.

right

Caution format = "rect()" only

The distance of the right side of the clipping boundary from the left canvas boundary.

bottom

Caution format = "rect()" only

The distance of the bottom side of the clipping boundary from the upper canvas boundary.

left

Caution format = "rect()" only

The distance of the left side of the clipping boundary from the left canvas boundary.

Example

# Clip 50 pixels off each side
root.createChild("image")
     .setFile("Textures/Splash1.png")
     .setSize(400, 400)
     .set("clip", "rect(50, 350, 350, 50)");

clip-frame

• Format: GLOBAL | PARENT | LOCAL
• Default: GLOBAL

Set the coordinate reference frame for the clip property.

# set clip reference frame to parent coordinate frame
element.set("clip-frame", canvas.Element.PARENT);

z-index

Note  Canvas elements have an optional Z-index, but in the absence of this, the creation order of elements is used. (Creation order becomes the storage order) Most Canvas code I’ve encountered so far is relying on this - child nodes are parsed in XML order, or from SVG which creates elements in SVG order. Usually no Z-indices are specified.

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

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

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

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