JavaScript/WASM runtime for Rive.
@rive-app/canvas
package. Rive provides web-based packages like WebGL, Canvas, and Lite versions.Install the dependency
Create a Canvas
Create a Rive instance
src
: A string representing the URL of the hosted .riv
file (as shown in the example below) or the path to the public asset .riv
file. For more details, refer to Rive Parameters on how to properly use this property.artboard
- (Optional) A string representing the artboard you want to display. If not supplied the default is selected.stateMachines
- A string representing the name of the state machine you wish to play.canvas
- The canvas element where the animation will be rendered.autoplay
- A boolean indicating whether the animation should play automatically.resizeDrawingSurfaceToCanvas
method ensures that the Rive animation is correctly scaled to fit the dimensions of the specified canvas element. By default, the canvas rendering surface might not match the exact size of the <canvas>
element defined in your HTML, which can lead to blurry or incorrectly scaled graphics, especially on high-DPI or retina displays.Calling this method adjusts the internal drawing surface so that the animation is rendered with crisp detail, matching the pixel density of the canvas. This is particularly important when:resizeDrawingSurfaceToCanvas
inside the onLoad
callback to ensure that the Rive asset has been fully loaded before adjusting the drawing surface. This prevents any rendering issues.resizeDrawingSurfaceToCanvas
to re-adjust the rendering surface:.riv
file is hosted. Set this as the src
attribute when creating a new Rive instance..riv
file within your web project. Handle .riv
files just like any other static asset (e.g., images or fonts) in your project.src
attribute, use the buffer
attribute to load an ArrayBuffer
when fetching a file. This is useful when reusing the same .riv
file across multiple Rive instances, allowing you to load it only once.rivFile
parameter to reuse a previously loaded Rive runtime file object, avoiding the need to fetch it again via the src
URL or reload it from the buffer
. This can significantly improve performance by eliminating redundant network requests and loading times, especially when creating multiple Rive instances from the same source. Unlike the src
and buffer
parameters, which require parsing under the hood to create a runtime file object, the riveFile
parameter uses an already parsed object, including any loaded assets. See Caching a Rive File.src
property.