.rivfiles over a CDN, and store them in AWS S3 for example. At runtime, some users face CORS issues where you may not be able to load in the
.rivfile in the web runtime. When this happens, make sure to set CORS headers on the host platform such that when the Rive file content is accessed in the web apps/sites, browsers won't block pulling data down. Read more on what CORS is. See here for more docs on how to configure CORS in AWS S3, as an example.
<canvas>width/height attributes in the DOM may be larger than you originally set by some factor. Internally, the high-level API tries to adjust the original set (or default) canvas width/height attributes by accounting for the
window.devicePixelRatio. By doing this internal calculation, we're able to account for high-dpi screens so that Rive animations don't have a "blurry" output. We do not however try to size the actual size of the canvas element with respect to the DOM. This is ultimately up to you to configure.
<canvas>element to determine the drawing size of the canvas, or the default values are not large enough to meet the artboard bounds of the animation. We recommend setting at least some CSS style width/height properties on the canvas to determine the size of the canvas box on the page, as the runtime will then use those values to try and set a best-fit estimate of the drawing size to the canvas element.
Riveobject when instantiated that helps adjust the width/height attributes of the canvas in the DOM based on the user's
devicePixelRatio. (note: this applies to the drawing surface of the canvas, not the size of the bounding box of the canvas element).
<canvas>element, there are 2 types of space sizes to think about.
<canvas>element that determines the drawing surface size of the canvas. In some cases, these values may influence the actual canvas size as well if there are no CSS styles set on the width/height of the element. But mainly, these width/height attributes help determine how much space is available to draw within the canvas element itself. Unlike the CSS width/height properties, these values are unitless.
stateMachinesproperty when instantiating Rive with the name of your state machine. To autoplay the state machine, don't forget to set
autoplay: truewhen instantiating the Rive object.