diff --git a/README.md b/README.md
index 8943a92..22a3635 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,42 @@ Looks like this:
+
+Or in case the canvas element appears later, for example, when it's created by DOM driver:
+
+```jsx
+import {run} from '@cycle/rxjs-run';
+import {makeDOMDriver} from '@cycle/dom'
+import {makeDynamicHostCanvasDriver, rect} from 'cycle-canvas';
+import {Observable} from 'rxjs'
+
+function main (sources) {
+ const hostCanvas$ = sources.DOM.select('canvas').element()
+ const rootElement$ = Observable.of(rect({
+ x: 10,
+ y: 10,
+ width: 160,
+ height: 100,
+ draw: [
+ {fill: 'purple'}
+ ]
+ }))
+ return {
+ DOM: Observable.of(),
+ Canvas: Observable.combineLatest(hostCanvas$, rootElement$).map(([hostCanvas, rootElement]) => {
+ return {hostCanvas, rootElement}
+ })
+ };
+}
+
+const drivers = {
+ DOM: makeDOMDriver('body'),
+ Canvas: makeDynamicHostCanvasDriver()
+};
+
+run(main, drivers);
+```
+
Also check out the [flappy bird example](https://cyclejs-community.github.io/cycle-canvas/).
You can find the source for flappy bird [here](https://github.com/cyclejs-community/cycle-canvas/tree/master/examples/flappy-bird).
@@ -73,10 +109,7 @@ You can find the source for flappy bird [here](https://github.com/cyclejs-commun
#### Creating a canvas driver
- [`makeCanvasDriver`](#makeCanvasDriver)
-
-#### Using event streams of the canvas element
-
-- [`sources.Canvas.events`](#events)
+- [`makeDynamicHostCanvasDriver`](#makeDynamicHostCanvasDriver)
#### Drawing shapes and text
@@ -109,13 +142,11 @@ The input to this driver is a stream of drawing instructions and transformations
- `selector: string` a css selector to use in order to find a canvas to attach the driver to.
- `canvasSize: {width: integer, height: integer}` an object that denotes the size to set for the attached canvas. If null, the driver attaches to its canvas without altering its size.
-## Using event streams of the canvas element
-
-### `sources.Canvas.events(eventName)`
+#### Listening to event streams of the canvas element: `sources.Canvas.events(eventName)`
-Canvas driver exposes a source object with an `events` method, which works similarly to the `events` method of the DOM driver.
+Canvas driver produced by `makeCanvasDriver` function exposes a source object with an `events` method, which works similarly to the `events` method of the DOM driver.
-#### Example:
+##### Example:
```js
import {run} from '@cycle/rxjs-run';
import {makeCanvasDriver, rect, text} from 'cycle-canvas';
@@ -150,6 +181,21 @@ const drivers = {
run(main, drivers);
```
+### `makeDynamicHostCanvasDriver()`
+
+An alternative factory for the canvas driver function.
+
+Does not take any arguments, but requires events in the sink to be of this format:
+```js
+{
+ hostCanvas
+ rootElement
+}
+```
+where `hostCanvas` is a `