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.