Drawing on canvas or Refs and the DOM

I’ve found very cool examples here using SVG animation. However not found any canvas ~animation~ drawing examples.

I’m trying to develop hyperapp PieCountdown component as this one.

In React I would use Refs to get access to canvas DOM element.

class Countdown extends Component {
  componentDidMount() {
    const ctx = this.canvas.getContext('2d');
    // draw something to canvas
    // ...
  }
  render() {
    return (
      <canvas ref={(canvas) => { this.canvas = canvas; }} />
    );
  }
};

export default Countdown;

Is it possible to get access to raw DOM elements in hyperapp, or what is recommended way to do canvas ~animations~ drawing?

[zaceno]

@mauron85 Yup that’s right. I called it “top-node” specifically to avoid confusion with root (which is an element – not a virtual dom node, btw). But yeah. The first, topmost h(... call or <div.. inside your view: (state, actions) => ... is the thing that can’t be keyed nor have onremove bound to it.

I agree that’s kind of unexpected. I mean I get why it is, but I had never thought of it until your examples.

[jorgebucaran]

@zaceno Apparently we stopped doing that though. I missed that change. When was that, @jbucaran ?

Recent commit, before 0.10.0 I think. This was an undocumented thing, so can’t complain. 😉😏