Using exposed CanvasRenderingContext2D API

[DanEscamilla]

Description

I'm having issues using the Context2D API, mainly that you cannot change the fill between multiple calls. Usually the way you interact with the Context2D api is by defining color styles and then calling draw operations.

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);

But it appears that the way the API works through the RiveRenderer, is to queue draw calls, but this means that the mutating of the fillStyle in a draw cycle, happens before the actual draw call is executed. This has the effect of all the draw calls using a single fillStyle.

Provide a Repro

const rive = await RiveRuntimeLoader({
    locateFile: (_) =>
      `https://unpkg.com/@rive-app/[email protected]/rive.wasm`,
  });
const riveRenderer = rive.makeRenderer(this._canvas);
const ctx = riveRenderer as (CanvasRenderingContext2D);

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);

ctx.fillStyle = "red";
ctx.fillRect(120, 10, 100, 100);

Source .riv/.rev file

N/A
-->

Expected behavior

In this case, both rectangles will be red, as opposed to one being blue and the other being red which is what is expected from using the native CanvasRenderingContext2D API

Screenshots

N/A

Browser & Versions (please complete the following information)

• Browser: Chrome Version 126.0.6478.62 (Official Build) (arm64)
• OS: Mac OS 13.6.4 (22G513)
• NPM Version: 10.5.0
• Rive version: 2.19.4

[HayesGordon]

Closing this as it's resolved in 0509735. Thanks for the contribution.