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))

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()

Empty API Method

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.

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 not 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()

• 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;
}

call the function after a number of ticks has succeded, cycled.

This apply a new method to the onDrawBefore stack, executing the function every modulu 0.

this._drawBefore.push(func)

this._drawAfter.push(func)

let i = this._drawAfter.indexOf(func)

let i = this._drawBefore.indexOf(func)

Empty API Method

Gym Bag.

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'
    }
}

Empty API Method

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')

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))

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

Apply global hooks here.

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()

Empty API Method

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.

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 not 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()

• 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;
}

call the function after a number of ticks has succeded, cycled.

This apply a new method to the onDrawBefore stack, executing the function every modulu 0.

this._drawBefore.push(func)

this._drawAfter.push(func)

let i = this._drawAfter.indexOf(func)

let i = this._drawBefore.indexOf(func)

Empty API Method

Gym Bag.

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'
    }
}

Empty API Method

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')

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))