stage

an addon instance has anounced itself. Perform the addComponent

this.dispatch('stage:prepare', {target, id, canvas })

this.dispatch('prepare', { target, id, stage: this, canvas })

Given a dictionary, return a finished dictionary, ready for event dispatch

a given object is mounted on _this_ - such as the `mouse`. This may be called in response to a 'stage:prepare' event.

console.log.apply(console, Array.from(arguments))

Accept a `canvas` node and an optional `draw` function, prepare the stage draw routine. If the `canvas` is given, immediately call `this.prepare(canvas)` to initiate the layer. new StageRender(canvas, ()=>{}) Any given `drawFunc` overrides the existing `this.stageStartDraw` method and expects the _next_ method to call once complete: The default `this.draw(ctx)` method is given` this.stageStartDraw(this.draw)

Return the result of the bounding box function, else resort to the object w/h

Perform any preparations for this stage instance to run the canvas tools. This includes resolving and measuring the canvas. class MainStage extends Stage { canvas = playspace prepare(target){ super.prepare(target) // ... } } This will run automatically if the canvas is given in the constructor new MainStage(canvas) // _prepared == true Once prepared the stage is essentially ready-to-go. stage = new MainStage() stage.prepare(canvas) stage.update()

A Convenient place to perform initial work.

Make a copy of a new Stage. Call prepare() if required. If `additionalData.loop` is `true` (default) start the update loopDraw

1ms delay for a next tick.

Return a dict, if the: + is dict, + thing is a string, assume name + thing is node, assume canvas

Make a copy of a new Stage. Call prepare() if required. If `additionalData.loop` is `true` (default) start the update loopDraw

When using the internal loop drawing the first draw call occurs through this method, calling `firstDraw` once, then changing the internal draw function to the typical `this.draw` If `this.draw` is not a method, `this.update()` is called and the `stopDraw` method is called.

A helper function to apply this stage to the animation frame, calling `update()` for every frame. Call once to start the loop. stage = new MainStage() stage.prepare(canvas) stage.loopDraw()

Return the cached context object of the current canvas.

+ `alpha`: A boolean value that indicates if the canvas contains an alpha channel. If set to false, the browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images. + `colorSpace` Optional: Specifies the color space of the rendering context. Possible values are: "srgb" selects the sRGB color space. (default value) "display-p3" selects the display-p3 color space. + `desynchronized`: A boolean value that hints the user agent to reduce the latency by desynchronizing the canvas paint cycle from the event loop. + `willReadFrequently`: A boolean value that indicates whether or not a lot of read-back operations are planned. This will force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling getImageData() frequently.

inline update per draw. For each call: + all _drawBefore_ methods + all _nextTick_ methods + the `draw` method (mapped through `this._drawFunc`) + all _drawAfter_ methods

Run the given function (with context) on the next draw call. This function is very similar to `onDrawBefore`, but only runs _once_. stage.nextTick(function(ctx){ // run next time. stage.runCustomRender(ctx) }) This is useful for performing clearups, or running routines on single action: let v = this.v = new Value(this.p.radius, width, easing) v.doneHandler = ()=>{ // st.switchOut() this.nextTick(this.switchOut.bind(this)) } switchOut() { this.log('doneHandler') this.v = undefined; }

modulo auto

The `firstDraw(ctx)` method us used _once_ when drawing starts. This occurs before the first `update()` call is performed. This is useful if you're setting context arguments - but only need to set them once. class Main extends Stage { firstDraw(ctx) { ctx.fillStyle = '#ccc' ctx.font = 'normal 1em arial' } }

The primary rendering function to override. Called by the `update()` method, given the context `ctx` of the target canvas. This is essentially the same as running the update function manually: const ctx = canvas.getContext('2d'); const stage = new MainStage() stage.prepare(canvas) function draw() { // or: stage.clear(ctx) ctx.clearRect(0, 0, canvas.width, canvas.height); // Run the draw routines stage.draw(ctx) // And rinse repeat. requestAnimationFrame(draw); } draw()

Perform a standard 'clearRect' using the cached dimensions of the canvas. stage.clear(ctx) Synonymous to: const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); Apply an optional flood fillStyle: stage.clear(ctx, '#000')

Called once by the prepare() method, to act as a first-time loader for the stage. Apply global hooks here.