Skip to content

[Feature]: rive integration on a single canvas #381

@ShaMan123

Description

@ShaMan123

Description

I would like to integrate Rive with other canvas features using the canvas-advanced package.
Rive forces me to call renderer.clear() at the beginning of each frame because it does something under the hood, registering the renderer:

"clear": function () {
// Add ourselves to the list of deferred canvases. This works here because clear aways
// gets called first.
_pendingCanvasRenderers.add(this);
this._drawList.push(
this._ctx["clearRect"].bind(
this._ctx,
0,
0,
this._canvas["width"],
this._canvas["height"]
)
);
},

That is not desirable in case the canvas is used to render other visuals, not allowing to share the same canvas/context.
I am aware that I can add the ctx.fillRect call to the render loop but I do not wish to do that due to performance and other considerations (such as having a background etc.).

related #336

Provide a Repro

I've reused the basketball demo and added a simple ctx.fillRect that I want to persist however renderer.clear() clears it.
https://codesandbox.io/p/sandbox/rive-canvas-integration-8xx7lx

Screen.Recording.2024-12-20.at.9.56.29.mov

Expected behavior

The clear call shoud be decoupled from the registration call.
clear should be optional and/or accept optional x, y, width, height params.
The under the hood registration call should be exposed so that the caller can decide if/how to clear the canvas.

rive.prepareAnimationFrame(); // registers the canvas
// frame logic
// rive.clear();
...
rive.resolveAnimationFrame();

Browser & Versions (please complete the following information)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions