diff --git a/dotlottie-rs/src/lottie_renderer/mod.rs b/dotlottie-rs/src/lottie_renderer/mod.rs
index ebd13195..b94d4b52 100644
--- a/dotlottie-rs/src/lottie_renderer/mod.rs
+++ b/dotlottie-rs/src/lottie_renderer/mod.rs
@@ -14,6 +14,9 @@ pub enum LottieRendererError {
#[error("Invalid color: {0}")]
InvalidColor(String),
+
+ #[error("Invalid argument: {0}")]
+ InvalidArgument(String),
}
pub struct LottieRenderer {
@@ -244,6 +247,15 @@ impl LottieRenderer {
return Ok(());
}
+ if width <= 0 || height <= 0 {
+ return Err(LottieRendererError::InvalidArgument(
+ "Width and height must be greater than 0".to_string(),
+ ));
+ }
+
+ self.width = width;
+ self.height = height;
+
let mut buffer = vec![0; (width * height * 4) as usize];
thorvg_canvas
.set_target(
diff --git a/web-example.html b/web-example.html
index 9bc10cf3..fa6e2000 100644
--- a/web-example.html
+++ b/web-example.html
@@ -10,6 +10,7 @@
+
{
+ resize();
+ });
+
progressBar.addEventListener("mousedown", () => {
cancelAnimationFrame(animationFrameId);
});
@@ -163,17 +159,34 @@
const newFrame =
(event.target.value / 100) * dotLottiePlayer.totalFrames();
- const updated = dotLottiePlayer.setFrame(newFrame);
- if (updated) {
- const rendered = dotLottiePlayer.render();
- if (rendered) {
- const frameBuffer = dotLottiePlayer.buffer();
- imageData.data.set(frameBuffer);
- ctx.putImageData(imageData, 0, 0);
- }
+ if (dotLottiePlayer.setFrame(newFrame)) {
+ render();
}
});
+ function resize() {
+ const { width: clientWidth, height: clientHeight } =
+ canvas.getBoundingClientRect();
+
+ const width = clientWidth * (window.devicePixelRatio || 1);
+ const height = clientHeight * (window.devicePixelRatio || 1);
+
+ canvas.width = width;
+ canvas.height = height;
+
+ dotLottiePlayer.resize(width, height);
+ }
+
+ function render() {
+ const rendered = dotLottiePlayer.render();
+ if (rendered) {
+ const frameBuffer = dotLottiePlayer.buffer();
+ const imageData = ctx.createImageData(canvas.width, canvas.height);
+ imageData.data.set(frameBuffer);
+ ctx.putImageData(imageData, 0, 0);
+ }
+ }
+
modeSelect.addEventListener("change", (event) => {
const mode = Module.Mode.values[event.target.value];
dotLottiePlayer.setConfig({
@@ -210,3 +223,11 @@