Documentation

Reference
qx:embedCanvas (qx.ui.embed.Canvas)

The Canvas widget embeds the HMTL canvas element [W3C-HTML5]

Note: This widget does not work in Internet Explorer!

To paint something on the canvas and keep the content updated on resizes you either have to override the qx.ui.embed.Canvas#_draw method or redraw the content on the qx.ui.embed.Canvas#redraw event. The drawing context can be obtained by qx.ui.embed.Canvas#getCanvas2d.

Note that this widget operates on two different coordinate systems. The canvas has its own coordinate system for drawing operations. This canvas coordinate system is scaled to fit actual size of the DOM element. Each time the size of the canvas dimensions is changed a redraw is required. In this case the protected method qx.ui.embed.Canvas#_draw is called and the event qx.ui.embed.Canvas#redraw is fired. You can synchronize the internal canvas dimension with the CSS dimension of the canvas element by setting qx.ui.embed.Canvas#syncDimension to true.

Example

Here is a little example of how to use the canvas widget.

var canvas = new qx.ui.embed.Canvas().set({
  canvasWidth: 200,
  canvasHeight: 200,
  syncDimension: true
});
canvas.addListener("redraw", function(e)
{
  var data = e.getData();
  var width = data.width;
  var height = data.height;
  var ctx = data.context;

  ctx.fillStyle = "rgb(200,0,0)";
  ctx.fillRect (20, 20, width-5, height-5);

  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx.fillRect (70, 70, 105, 100);
}, this);

External Documentation

Documentation of this widget in the qooxdoo wiki.
canvasHeight

The internal height of the canvas coordinates

Default value: 150 Possible values:
syncDimension

Whether canvas and widget coordinates should be synchronized

Default value: false Possible values:
canvasWidth

The internal with of the canvas coordinates

Default value: 300 Possible values: 

{   u'add': {   u'*': u'add/defaultWithPosition.mako',
                u'layout': u'add/noParent.mako',
                u'qx:application': u'add/qx/application.mako',
                u'qx:split': u'add/qx/split.mako',
                u'qxt:variant': u'add/noParent.mako'},
    u'attributes': {u'*': u'attr/default.mako', u'id': u'', u'qxt:*': u''},
    u'body': {   u'*': u'body/qx/widget.mako',
                 u'qxt:component': u'body/qxt/component_root.mako'},
    u'data': {   u'attr': {},
                 u'props': {   u'class': u'qx.ui.embed.Canvas',
                               u'constructor-args': u'canvasWidth,canvasHeight'}},
    u'extends': [u'qx:embedCanvas', u'qx:widget', u'base']}

LGPL, EPL © 2008 QxTransformer | Siarhei Barysiuk & Christian Boulanger.
Site design and illustrations by Siarhei Barysiuk. | Icons by Dry Icons.

qooxdoo