4.7  <canvas>

This is a canvas for arbitrary vector graphics. It renders SVG code and provides a mini-DOM for scripting the SVG.

4.7.1  Attributes

Name Type Default Value Description
dom object Read-only property for accessing the mini-DOM representing the current image. Call the method update() after changing the DOM to redraw the image.
graphics string Drawing commands. Put your SVG graphics code in there.
uri URI URI where to load SVG data from.

If you omit the width and height properties in the <svg> tag, then the canvas size will default to 100 x 100.

4.7.2  Mini-DOM

The mini-DOM contains the tree of SVG elements. Every node in the DOM represents one element in the SVG image. By manipulating properties of SVG elements, you can animate the image.

The properties of each node can be addressed by using a [name] notation, where name is the name of the property. All property values have to set as strings.

The nodes of the mini-DOM provide a set of methods which can be invoked.

Method Name Arguments Description
get id: string Returns the SVG element by the given ID. This method only has effect when called on the root node of the DOM tree.
get_children Returns a list of all child nodes of the DOM node. Using child lists is a way of accessing nodes in the DOM without the need to know their IDs.
update Signals that the DOM has been updated. Call this method after modifying SVG properties in order to redraw the image. This method only has effect when called on the root node of the DOM tree.

4.7.3  Examples

<display bg-color="#ffffffa0">

  <canvas id="cnv" width="200" height="200"
          on-enter="self.dom.get('rct')['style']='fill:green'; self.dom.update()"
          on-leave="self.dom.get('rct')['style']='fill:red'; self.dom.update()"/>

  <script><![CDATA[

    svg = """
      <svg>

        <rect id="rct" x="10" y="10" width="80" height="80" style="fill:red"/>

      </svg>
    """

    Dsp.cnv.graphics = svg

  ]]></script>

</display>