CanvasWidget

The canvas can be used for specialized graphics of many sorts. It can provide either a WebGL context or a 2d context as in the example below:

from flexx import app, event, ui

class Example(ui.CanvasWidget):

    def init(self):
        super().init()
        self.ctx = self.node.getContext('2d')
        self.set_capture_mouse(1)
        self._last_pos = (0, 0)

    @event.reaction('pointer_move')
    def on_move(self, *events):
        for ev in events:
            self.ctx.beginPath()
            self.ctx.strokeStyle = '#080'
            self.ctx.lineWidth = 3
            self.ctx.lineCap = 'round'
            self.ctx.moveTo(*self._last_pos)
            self.ctx.lineTo(*ev.pos)
            self.ctx.stroke()
            self._last_pos = ev.pos

    @event.reaction('pointer_down')
    def on_down(self, *events):
        self._last_pos = events[-1].pos

open in new tab

Also see example: drawing.py, splines.py.

---

class flexx.ui.CanvasWidget(*init_args, **kwargs)

Inherits from: Widget

A widget that provides an HTML5 canvas. The canvas is scaled with the available space. Use self.node.getContext('2d') or self.node.getContext('webgl') in the init() method to get a contex to perform the actual drawing.

The node of this widget is a <canvas> wrapped in a <div> (the outernode) to handle sizing.

properties: capture_wheel

actions: set_capture_wheel

capture_wheel

BoolProp – Whether the wheel event is “captured”, i.e. not propagated to result into scrolling of the parent widget (or page). If True, if no scrolling must have been performed outside of the widget for about half a second in order for the widget to capture scroll events.

set_capture_wheel(*val)

action – Setter for the ‘capture_wheel’ property.