diff --git a/render-wasm/src/math.rs b/render-wasm/src/math.rs
index de819a86bb..0b8feeed04 100644
--- a/render-wasm/src/math.rs
+++ b/render-wasm/src/math.rs
@@ -6,6 +6,7 @@ pub type Rect = skia::Rect;
 pub type Matrix = skia::Matrix;
 pub type Vector = skia::Vector;
 pub type Point = skia::Point;
+pub type Size = skia::Size;
 
 const THRESHOLD: f32 = 0.001;
 
diff --git a/render-wasm/src/render.rs b/render-wasm/src/render.rs
index 72cc2078f2..2cd5dcd460 100644
--- a/render-wasm/src/render.rs
+++ b/render-wasm/src/render.rs
@@ -787,8 +787,8 @@ impl RenderState {
             self.tile_viewbox
                 .set_interest(self.options.dpr_viewport_interest_area_threshold);
             self.resize(
-                self.viewbox.width.floor() as i32,
-                self.viewbox.height.floor() as i32,
+                self.viewbox.width().floor() as i32,
+                self.viewbox.height().floor() as i32,
             )?;
             self.fonts.set_scale_debug_font(dpr);
         }
@@ -1944,8 +1944,8 @@ impl RenderState {
                 let cache_h = cache_dim.height as f32;
 
                 // Viewport in target pixels.
-                let vw = (self.viewbox.width * self.options.dpr).max(1.0);
-                let vh = (self.viewbox.height * self.options.dpr).max(1.0);
+                let vw = self.viewbox.dpr_width().max(1.0);
+                let vh = self.viewbox.dpr_height().max(1.0);
 
                 // Inverse-map viewport corners into cache coordinates.
                 // target = (cache * navigate_zoom) translated by (translate_x, translate_y) (in cache coords).
diff --git a/render-wasm/src/render/surfaces.rs b/render-wasm/src/render/surfaces.rs
index 6e8736bffc..2b9973a2e8 100644
--- a/render-wasm/src/render/surfaces.rs
+++ b/render-wasm/src/render/surfaces.rs
@@ -496,11 +496,11 @@ impl Surfaces {
         );
         canvas.clear(background);
 
-        let s = viewbox.zoom * dpr;
+        let s = viewbox.get_scale();
         let atlas_scale = self.atlas_scale.max(0.01);
         canvas.translate((
-            (self.atlas_origin.x + viewbox.pan_x) * s,
-            (self.atlas_origin.y + viewbox.pan_y) * s,
+            (self.atlas_origin.x + viewbox.pan.x) * s,
+            (self.atlas_origin.y + viewbox.pan.y) * s,
         ));
         canvas.scale((s / atlas_scale, s / atlas_scale));
 
diff --git a/render-wasm/src/view.rs b/render-wasm/src/view.rs
index 8f21a27eae..6840c3ff60 100644
--- a/render-wasm/src/view.rs
+++ b/render-wasm/src/view.rs
@@ -1,25 +1,22 @@
-use skia_safe::Rect;
-
-use crate::math::{Matrix, Point};
+use std::ops::{Mul};
+use crate::math::{Matrix, Point, Rect, Size};
 
 #[derive(Debug, Copy, Clone)]
 pub(crate) struct Viewbox {
-    pub pan_x: f32,
-    pub pan_y: f32,
-    pub width: f32,
-    pub height: f32,
+    pub pan: Point,
+    pub size: Size,
     pub zoom: f32,
+    pub dpr: f32,
     pub area: Rect,
 }
 
 impl Default for Viewbox {
     fn default() -> Self {
         Self {
-            pan_x: 0.,
-            pan_y: 0.,
-            width: 0.0,
-            height: 0.0,
+            pan: Point::new(0.0, 0.0),
+            size: Size::new(0.0, 0.0),
             zoom: 1.0,
+            dpr: 1.0,
             area: Rect::new_empty(),
         }
     }
@@ -27,36 +24,55 @@ impl Default for Viewbox {
 
 impl Viewbox {
     pub fn new(width: f32, height: f32) -> Self {
-        let area = Rect::from_xywh(0., 0., width, height);
+        let size = Size::new(width, height);
+        let area = Rect::from_size(size);
         Self {
-            width,
-            height,
+            size,
             area,
             ..Self::default()
         }
     }
 
+    pub fn dpr_width(&self) -> f32 {
+        self.size.width * self.dpr
+    }
+
+    pub fn dpr_height(&self) -> f32 {
+        self.size.height * self.dpr
+    }
+
+    pub fn width(&self) -> f32 {
+        self.size.width
+    }
+
+    pub fn height(&self) -> f32 {
+        self.size.height
+    }
+
+    pub fn set_dpr(&mut self, dpr: f32) -> f32 {
+        self.dpr = dpr;
+        dpr
+    }
+
     pub fn set_all(&mut self, zoom: f32, pan_x: f32, pan_y: f32) {
-        self.pan_x = pan_x;
-        self.pan_y = pan_y;
+        self.pan.set(pan_x, pan_y);
         self.zoom = zoom;
         self.area.set_xywh(
-            -self.pan_x,
-            -self.pan_y,
-            self.width / self.zoom,
-            self.height / self.zoom,
+            -self.pan.x,
+            -self.pan.y,
+            self.size.width / self.zoom,
+            self.size.height / self.zoom,
         );
     }
 
     pub fn set_wh(&mut self, width: f32, height: f32) {
-        self.width = width;
-        self.height = height;
+        self.size.set(width, height);
         self.area
-            .set_wh(self.width / self.zoom, self.height / self.zoom);
+            .set_wh(self.size.width / self.zoom, self.size.height / self.zoom);
     }
 
     pub fn pan(&self) -> Point {
-        Point::new(self.pan_x, self.pan_y)
+        self.pan
     }
 
     pub fn zoom(&self) -> f32 {