rive-app / rive-wasm

Wasm/JS runtime for Rive
MIT License
694 stars 49 forks source link

Using exposed CanvasRenderingContext2D API #360

Closed DanEscamilla closed 3 weeks ago

DanEscamilla commented 1 month ago

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/canvas-advanced@2.17.3/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)

HayesGordon commented 3 weeks ago

Closing this as it's resolved in https://github.com/rive-app/rive-wasm/commit/0509735de630d3184e56fc89bae1b6f9b96522b5. Thanks for the contribution.