diff --git a/crates/koyori-arc-core/src/backend/svg.rs b/crates/koyori-arc-core/src/backend/svg.rs
index ad380b0..ede9bf4 100644
--- a/crates/koyori-arc-core/src/backend/svg.rs
+++ b/crates/koyori-arc-core/src/backend/svg.rs
@@ -241,6 +241,8 @@ fn render_text(svg: &mut String, t: &TextPrim, palette: &Palette) {
 
 fn escape_xml(s: &str) -> String {
     s.replace('&', "&")
+        .replace('"', """)
+        .replace('\'', "'")
         .replace('<', "&lt;")
         .replace('>', "&gt;")
 }
@@ -248,3 +250,28 @@ fn escape_xml(s: &str) -> String {
 pub fn empty_svg() -> String {
     r#"<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0" role="img" aria-label="Empty Gantt chart" font-family="sans-serif" font-size="12"><title>Empty Gantt chart</title><desc>No tasks to display</desc></svg>"#.to_string()
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn escape_xml_quotes_in_attribute_context() {
+        let malicious = "x\" onmouseover=\"alert(1)\"";
+        let escaped = escape_xml(malicious);
+        assert!(!escaped.contains('"'));
+        assert!(escaped.contains("&quot;"));
+        assert_eq!(
+            escaped,
+            "x&quot; onmouseover=&quot;alert(1)&quot;"
+        );
+    }
+
+    #[test]
+    fn data_task_id_attribute_is_safe() {
+        let id = "x\" onmouseover=\"alert(1)\"";
+        let fragment = format!(r#"<g data-task-id="{}">"#, escape_xml(id));
+        assert!(fragment.contains("data-task-id=\"x&quot; onmouseover=&quot;alert(1)&quot;\""));
+        assert!(!fragment.contains(r#"onmouseover="alert"#));
+    }
+}
diff --git a/crates/koyori-arc-core/src/render.rs b/crates/koyori-arc-core/src/render.rs
index f4af517..5ba2b2c 100644
--- a/crates/koyori-arc-core/src/render.rs
+++ b/crates/koyori-arc-core/src/render.rs
@@ -1,10 +1,123 @@
-use chrono::NaiveDate;
+use chrono::{Duration, NaiveDate};
 use wasm_bindgen::prelude::*;
 
+use crate::backend::svg::empty_svg;
 use crate::backend::{BackendOutput, CanvasBackend, CommandBuffer, RenderBackend, SvgBackend};
+use crate::display_list::constants::{HEADER_H, LABEL_W, LEGEND_H, PX_PER_DAY, ROW_H};
 use crate::display_list::{build_display_list, types::Palette, ScrollViewport};
 use crate::graph::{GanttDep, GanttGraph, GanttTask};
 
+/// Upper bounds enforced at Wasm entry points to limit memory/CPU abuse.
+pub const MAX_TASKS: usize = 10_000;
+pub const MAX_DEPS: usize = 100_000;
+/// Allows about 839 bytes per task at `MAX_TASKS`, enough for realistic IDs and
+/// titles plus JSON overhead while rejecting multi-megabyte individual fields.
+pub const MAX_TASKS_JSON_BYTES: usize = 8 * 1024 * 1024;
+/// Allows about 167 bytes per dependency at `MAX_DEPS`, leaving ample room for
+/// two realistic task IDs and JSON overhead without accepting unbounded input.
+pub const MAX_DEPS_JSON_BYTES: usize = 16 * 1024 * 1024;
+pub const MAX_DATE_SPAN_DAYS: i64 = 3_650;
+
+/// Conservative cross-browser Canvas2D backing-store edge limit. Browser and
+/// GPU limits vary, but 16,384px is the lowest commonly supported maximum edge;
+/// rejecting larger buffers avoids browser-specific blank canvases/context loss.
+pub const MAX_CANVAS_SIDE_PX: usize = 16_384;
+/// Keep the RGBA backing store near 128 MiB even when both dimensions are
+/// individually supported. This leaves headroom for browser/GPU copies and
+/// avoids a 16,384 x 16,384 canvas allocating roughly 1 GiB per buffer.
+pub const MAX_CANVAS_AREA_PX: usize = 32 * 1024 * 1024;
+const CHART_RIGHT_PADDING_PX: f64 = 20.0;
+const CHART_BOTTOM_PADDING_PX: f64 = 10.0;
+pub const MAX_CANVAS_ROWS: usize = ((MAX_CANVAS_SIDE_PX as f64
+    - HEADER_H
+    - LEGEND_H
+    - CHART_BOTTOM_PADDING_PX)
+    / ROW_H) as usize;
+pub const MAX_CANVAS_DATE_SPAN_DAYS: i64 = ((MAX_CANVAS_SIDE_PX as f64
+    - LABEL_W
+    - CHART_RIGHT_PADDING_PX)
+    / PX_PER_DAY) as i64;
+
+fn json_error(msg: impl Into<String>) -> String {
+    serde_json::json!({ "error": msg.into() }).to_string()
+}
+
+fn raw_json_limit_error(tasks_json: &str, deps_json: &str) -> Option<String> {
+    if tasks_json.len() > MAX_TASKS_JSON_BYTES {
+        return Some(format!(
+            "tasks JSON byte size exceeds limit ({MAX_TASKS_JSON_BYTES})"
+        ));
+    }
+    if deps_json.len() > MAX_DEPS_JSON_BYTES {
+        return Some(format!(
+            "dependencies JSON byte size exceeds limit ({MAX_DEPS_JSON_BYTES})"
+        ));
+    }
+    None
+}
+
+fn common_graph_limit_error(tasks: &[GanttTask], deps: &[GanttDep]) -> Option<String> {
+    if tasks.len() > MAX_TASKS {
+        return Some(format!("task count exceeds limit ({MAX_TASKS})"));
+    }
+    if deps.len() > MAX_DEPS {
+        return Some(format!("dependency count exceeds limit ({MAX_DEPS})"));
+    }
+    None
+}
+
+fn rendered_date_span_days(tasks: &[GanttTask]) -> i64 {
+    if tasks.is_empty() {
+        return 0;
+    }
+    let min_start = tasks.iter().map(|t| t.start).min().unwrap();
+    let max_date = tasks
+        .iter()
+        .map(|t| t.end.unwrap_or_else(|| t.start + Duration::days(1)))
+        .max()
+        .unwrap();
+    (max_date - min_start).num_days().max(0)
+}
+
+fn svg_graph_limit_error(tasks: &[GanttTask], deps: &[GanttDep]) -> Option<String> {
+    if let Some(msg) = common_graph_limit_error(tasks, deps) {
+        return Some(msg);
+    }
+    if rendered_date_span_days(tasks) > MAX_DATE_SPAN_DAYS {
+        return Some(format!("date range exceeds limit ({MAX_DATE_SPAN_DAYS} days)"));
+    }
+    None
+}
+
+fn canvas_graph_limit_error(tasks: &[GanttTask], deps: &[GanttDep]) -> Option<String> {
+    if let Some(msg) = common_graph_limit_error(tasks, deps) {
+        return Some(msg);
+    }
+    if tasks.len() > MAX_CANVAS_ROWS {
+        return Some(format!(
+            "canvas row count exceeds limit ({MAX_CANVAS_ROWS} rows / {MAX_CANVAS_SIDE_PX}px)"
+        ));
+    }
+    if rendered_date_span_days(tasks) > MAX_CANVAS_DATE_SPAN_DAYS {
+        return Some(format!(
+            "canvas date range exceeds limit ({MAX_CANVAS_DATE_SPAN_DAYS} days / {MAX_CANVAS_SIDE_PX}px)"
+        ));
+    }
+    let width_px = rendered_date_span_days(tasks) as f64 * PX_PER_DAY
+        + LABEL_W
+        + CHART_RIGHT_PADDING_PX;
+    let height_px = tasks.len() as f64 * ROW_H
+        + HEADER_H
+        + LEGEND_H
+        + CHART_BOTTOM_PADDING_PX;
+    if width_px * height_px > MAX_CANVAS_AREA_PX as f64 {
+        return Some(format!(
+            "canvas area exceeds limit ({MAX_CANVAS_AREA_PX} pixels)"
+        ));
+    }
+    None
+}
+
 /// Native entry point — accepts typed structs directly.
 pub fn render(
     tasks: &[GanttTask],
@@ -66,14 +179,20 @@ pub fn render_svg(
     today_iso: Option<String>,
     viewport_json: Option<String>,
 ) -> String {
+    if raw_json_limit_error(tasks_json, deps_json).is_some() {
+        return empty_svg();
+    }
     let tasks: Vec<GanttTask> = match serde_json::from_str(tasks_json) {
         Ok(v) => v,
-        Err(e) => return format!("<!-- parse error: {e} -->"),
+        Err(_) => return empty_svg(),
     };
     let deps: Vec<GanttDep> = match serde_json::from_str(deps_json) {
         Ok(v) => v,
-        Err(e) => return format!("<!-- parse error: {e} -->"),
+        Err(_) => return empty_svg(),
     };
+    if svg_graph_limit_error(&tasks, &deps).is_some() {
+        return empty_svg();
+    }
     let today = today_iso.and_then(|s| NaiveDate::parse_from_str(&s, "%Y-%m-%d").ok());
     let scroll_viewport = viewport_json.and_then(|s| serde_json::from_str(&s).ok());
     render(&tasks, &deps, today, scroll_viewport)
@@ -88,18 +207,24 @@ pub fn render_canvas_commands(
     today_iso: Option<String>,
     viewport_json: Option<String>,
 ) -> String {
+    if let Some(msg) = raw_json_limit_error(tasks_json, deps_json) {
+        return json_error(msg);
+    }
     let tasks: Vec<GanttTask> = match serde_json::from_str(tasks_json) {
         Ok(v) => v,
-        Err(e) => return format!(r#"{{"error":"parse error: {e}"}}"#),
+        Err(e) => return json_error(format!("parse error: {e}")),
     };
     let deps: Vec<GanttDep> = match serde_json::from_str(deps_json) {
         Ok(v) => v,
-        Err(e) => return format!(r#"{{"error":"parse error: {e}"}}"#),
+        Err(e) => return json_error(format!("parse error: {e}")),
     };
+    if let Some(msg) = canvas_graph_limit_error(&tasks, &deps) {
+        return json_error(msg);
+    }
     let today = today_iso.and_then(|s| NaiveDate::parse_from_str(&s, "%Y-%m-%d").ok());
     let scroll_viewport = viewport_json.and_then(|s| serde_json::from_str(&s).ok());
     let buffer = render_canvas(&tasks, &deps, today, scroll_viewport);
-    serde_json::to_string(&buffer).unwrap_or_else(|e| format!(r#"{{"error":"serialize error: {e}"}}"#))
+    serde_json::to_string(&buffer).unwrap_or_else(|e| json_error(format!("serialize error: {e}")))
 }
 
 #[cfg(test)]
@@ -239,9 +364,246 @@ mod tests {
     }
 
     #[test]
-    fn parse_error_returns_comment() {
+    fn parse_error_returns_safe_empty_svg() {
         let svg = render_svg("not json", "[]", None, None);
-        assert!(svg.starts_with("<!-- parse error:"));
+        assert_eq!(svg, crate::backend::svg::empty_svg());
+        assert!(!svg.contains("parse error"));
+        assert!(!svg.contains("<!--"));
+    }
+
+    #[test]
+    fn parse_error_comment_injection_does_not_break_markup() {
+        let payload = r#"not json --><img onerror=alert(1)><!--"#;
+        let svg = render_svg(payload, "[]", None, None);
+        assert_eq!(svg, crate::backend::svg::empty_svg());
+        assert!(!svg.contains("<img"));
+    }
+
+    #[test]
+    fn wasm_id_xss_payload_escaped_in_output() {
+        let tasks = vec![GanttTask {
+            id: "x\" onmouseover=\"alert(1)\"".to_string(),
+            title: "Safe".to_string(),
+            progress_pct: 0,
+            start: date(2026, 6, 1),
+            end: Some(date(2026, 6, 2)),
+        }];
+        let svg = render(&tasks, &[], None, None);
+        assert!(svg.contains(r#"data-task-id="x&quot; onmouseover=&quot;alert(1)&quot;""#));
+        assert!(!svg.contains(r#"onmouseover="alert"#));
+    }
+
+    #[test]
+    fn json_error_produces_valid_json_with_quotes() {
+        let s = super::json_error(r#"parse error: bad "quote""#);
+        let v: serde_json::Value = serde_json::from_str(&s).expect("valid json");
+        assert_eq!(v["error"].as_str().unwrap(), r#"parse error: bad "quote""#);
+    }
+
+    #[test]
+    fn canvas_parse_error_json_is_valid() {
+        let json = render_canvas_commands("not json", "[]", None, None);
+        let v: serde_json::Value = serde_json::from_str(&json).expect("valid json");
+        assert!(v.get("error").is_some());
+    }
+
+    #[test]
+    fn raw_byte_limits_reject_tasks_before_deserialization() {
+        // Deliberately invalid JSON: the byte-limit error proves parsing was not attempted.
+        let oversized_tasks = "x".repeat(MAX_TASKS_JSON_BYTES + 1);
+        let svg = render_svg(&oversized_tasks, "[]", None, None);
+        assert_eq!(svg, crate::backend::svg::empty_svg());
+
+        let json = render_canvas_commands(&oversized_tasks, "[]", None, None);
+        let value: serde_json::Value = serde_json::from_str(&json).unwrap();
+        assert!(value["error"]
+            .as_str()
+            .unwrap()
+            .contains("tasks JSON byte size"));
+        assert!(!value["error"].as_str().unwrap().contains("parse error"));
+    }
+
+    #[test]
+    fn raw_byte_limits_reject_dependencies_before_deserialization() {
+        // Deliberately invalid JSON: the byte-limit error proves parsing was not attempted.
+        let oversized_deps = "x".repeat(MAX_DEPS_JSON_BYTES + 1);
+        let svg = render_svg("[]", &oversized_deps, None, None);
+        assert_eq!(svg, crate::backend::svg::empty_svg());
+
+        let json = render_canvas_commands("[]", &oversized_deps, None, None);
+        let value: serde_json::Value = serde_json::from_str(&json).unwrap();
+        assert!(value["error"]
+            .as_str()
+            .unwrap()
+            .contains("dependencies JSON byte size"));
+        assert!(!value["error"].as_str().unwrap().contains("parse error"));
+    }
+
+    #[test]
+    fn raw_byte_limit_rejects_single_giant_title() {
+        let giant_title = "x".repeat(MAX_TASKS_JSON_BYTES);
+        let tasks = serde_json::json!([{
+            "id": "giant-title",
+            "title": giant_title,
+            "progress_pct": 0,
+            "start": "2026-06-01",
+            "end": "2026-06-02"
+        }])
+        .to_string();
+        assert!(tasks.len() > MAX_TASKS_JSON_BYTES);
+
+        let svg = render_svg(&tasks, "[]", None, None);
+        assert_eq!(svg, crate::backend::svg::empty_svg());
+        let json = render_canvas_commands(&tasks, "[]", None, None);
+        let value: serde_json::Value = serde_json::from_str(&json).unwrap();
+        assert!(value["error"]
+            .as_str()
+            .unwrap()
+            .contains("tasks JSON byte size"));
+    }
+
+    #[test]
+    fn graph_limit_rejects_excessive_tasks() {
+        let tasks: Vec<GanttTask> = (0..=super::MAX_TASKS)
+            .map(|i| GanttTask {
+                id: format!("t{i}"),
+                title: format!("Task {i}"),
+                progress_pct: 0,
+                start: date(2026, 6, 1),
+                end: Some(date(2026, 6, 2)),
+            })
+            .collect();
+        let svg = render_svg(
+            &serde_json::to_string(&tasks).unwrap(),
+            "[]",
+            None,
+            None,
+        );
+        assert_eq!(svg, crate::backend::svg::empty_svg());
+    }
+
+    #[test]
+    fn graph_limit_rejects_excessive_deps() {
+        let tasks = vec![GanttTask {
+            id: "t0".to_string(),
+            title: "Only".to_string(),
+            progress_pct: 0,
+            start: date(2026, 6, 1),
+            end: Some(date(2026, 6, 2)),
+        }];
+        let deps: Vec<GanttDep> = (0..=super::MAX_DEPS)
+            .map(|i| GanttDep {
+                blocker_task_id: "t0".to_string(),
+                blocked_task_id: format!("t{i}"),
+            })
+            .collect();
+        let json = render_canvas_commands(
+            &serde_json::to_string(&tasks).unwrap(),
+            &serde_json::to_string(&deps).unwrap(),
+            None,
+            None,
+        );
+        let v: serde_json::Value = serde_json::from_str(&json).expect("valid json");
+        assert!(v.get("error").is_some());
+    }
+
+    fn canvas_tasks(count: usize, end_offset_days: i64) -> Vec<GanttTask> {
+        (0..count)
+            .map(|i| GanttTask {
+                id: format!("canvas-{i}"),
+                title: format!("Canvas task {i}"),
+                progress_pct: 0,
+                start: date(2026, 1, 1),
+                end: Some(date(2026, 1, 1) + Duration::days(end_offset_days)),
+            })
+            .collect()
+    }
+
+    #[test]
+    fn canvas_row_limit_is_derived_from_max_side() {
+        let accepted_height = MAX_CANVAS_ROWS as f64 * ROW_H
+            + HEADER_H
+            + LEGEND_H
+            + CHART_BOTTOM_PADDING_PX;
+        let rejected_height = (MAX_CANVAS_ROWS + 1) as f64 * ROW_H
+            + HEADER_H
+            + LEGEND_H
+            + CHART_BOTTOM_PADDING_PX;
+        assert!(accepted_height <= MAX_CANVAS_SIDE_PX as f64);
+        assert!(rejected_height > MAX_CANVAS_SIDE_PX as f64);
+
+        let accepted = canvas_tasks(MAX_CANVAS_ROWS, 1);
+        let accepted_json = render_canvas_commands(
+            &serde_json::to_string(&accepted).unwrap(),
+            "[]",
+            None,
+            None,
+        );
+        let accepted_value: serde_json::Value = serde_json::from_str(&accepted_json).unwrap();
+        assert!(accepted_value.get("error").is_none());
+        assert!(accepted_value["viewport_height"].as_f64().unwrap() <= MAX_CANVAS_SIDE_PX as f64);
+
+        let rejected = canvas_tasks(MAX_CANVAS_ROWS + 1, 1);
+        let rejected_json = render_canvas_commands(
+            &serde_json::to_string(&rejected).unwrap(),
+            "[]",
+            None,
+            None,
+        );
+        let rejected_value: serde_json::Value = serde_json::from_str(&rejected_json).unwrap();
+        assert!(rejected_value["error"].as_str().unwrap().contains("canvas row count"));
+    }
+
+    #[test]
+    fn canvas_date_limit_is_derived_from_max_side_and_does_not_reduce_svg_limit() {
+        let accepted_width = MAX_CANVAS_DATE_SPAN_DAYS as f64 * PX_PER_DAY
+            + LABEL_W
+            + CHART_RIGHT_PADDING_PX;
+        let rejected_width = (MAX_CANVAS_DATE_SPAN_DAYS + 1) as f64 * PX_PER_DAY
+            + LABEL_W
+            + CHART_RIGHT_PADDING_PX;
+        assert!(accepted_width <= MAX_CANVAS_SIDE_PX as f64);
+        assert!(rejected_width > MAX_CANVAS_SIDE_PX as f64);
+
+        let accepted = canvas_tasks(1, MAX_CANVAS_DATE_SPAN_DAYS);
+        let accepted_tasks_json = serde_json::to_string(&accepted).unwrap();
+        let accepted_json = render_canvas_commands(&accepted_tasks_json, "[]", None, None);
+        let accepted_value: serde_json::Value = serde_json::from_str(&accepted_json).unwrap();
+        assert!(accepted_value.get("error").is_none());
+        assert!(accepted_value["viewport_width"].as_f64().unwrap() <= MAX_CANVAS_SIDE_PX as f64);
+
+        let rejected = canvas_tasks(1, MAX_CANVAS_DATE_SPAN_DAYS + 1);
+        let rejected_tasks_json = serde_json::to_string(&rejected).unwrap();
+        let rejected_json = render_canvas_commands(&rejected_tasks_json, "[]", None, None);
+        let rejected_value: serde_json::Value = serde_json::from_str(&rejected_json).unwrap();
+        assert!(rejected_value["error"].as_str().unwrap().contains("canvas date range"));
+
+        let svg = render_svg(&rejected_tasks_json, "[]", None, None);
+        assert_ne!(svg, crate::backend::svg::empty_svg());
+    }
+
+    #[test]
+    fn canvas_rejects_near_maximum_sides_when_area_is_too_large() {
+        let tasks = canvas_tasks(MAX_CANVAS_ROWS, MAX_CANVAS_DATE_SPAN_DAYS);
+        let width_px = MAX_CANVAS_DATE_SPAN_DAYS as f64 * PX_PER_DAY
+            + LABEL_W
+            + CHART_RIGHT_PADDING_PX;
+        let height_px = MAX_CANVAS_ROWS as f64 * ROW_H
+            + HEADER_H
+            + LEGEND_H
+            + CHART_BOTTOM_PADDING_PX;
+        assert!(width_px <= MAX_CANVAS_SIDE_PX as f64);
+        assert!(height_px <= MAX_CANVAS_SIDE_PX as f64);
+        assert!(width_px * height_px > 267_000_000.0);
+
+        let json = render_canvas_commands(
+            &serde_json::to_string(&tasks).unwrap(),
+            "[]",
+            None,
+            None,
+        );
+        let value: serde_json::Value = serde_json::from_str(&json).unwrap();
+        assert!(value["error"].as_str().unwrap().contains("canvas area"));
     }
 
     #[test]
diff --git a/crates/koyori-arc-core/tests/wasm.rs b/crates/koyori-arc-core/tests/wasm.rs
index 81f75bf..f2ac90f 100644
--- a/crates/koyori-arc-core/tests/wasm.rs
+++ b/crates/koyori-arc-core/tests/wasm.rs
@@ -31,9 +31,19 @@ fn render_svg_with_today_marker() {
 }
 
 #[wasm_bindgen_test]
-fn render_svg_parse_error_returns_comment() {
+fn render_svg_parse_error_returns_safe_empty_svg() {
     let svg = koyori_arc_core::render_svg("not json", "[]", None, None);
-    assert!(svg.starts_with("<!-- parse error:"));
+    assert!(svg.contains("width=\"0\""));
+    assert!(!svg.contains("<!--"));
+    assert!(!svg.contains("parse error"));
+}
+
+#[wasm_bindgen_test]
+fn render_svg_id_xss_payload_escaped() {
+    let tasks = r#"[{"id":"x\" onmouseover=\"alert(1)","title":"Safe","progress_pct":0,"start":"2026-06-01","end":"2026-06-02"}]"#;
+    let svg = koyori_arc_core::render_svg(tasks, "[]", None, None);
+    assert!(svg.contains("&quot;"));
+    assert!(!svg.contains(r#"onmouseover="alert"#));
 }
 
 #[wasm_bindgen_test]
diff --git a/packages/arc-vue/src/GanttChart.vue b/packages/arc-vue/src/GanttChart.vue
index 1a61ea0..477fbc9 100644
--- a/packages/arc-vue/src/GanttChart.vue
+++ b/packages/arc-vue/src/GanttChart.vue
@@ -8,6 +8,12 @@ import {
   findTaskAtPoint,
   type TaskHitRegion,
 } from './replayCommands';
+import { resetCanvasElement } from './canvasLifecycle';
+import {
+  chartHeightForTaskCount,
+  isCanvasCapacityError,
+  resolveCanvasFailure,
+} from './canvasFallback';
 
 const props = defineProps<{
   tasks: GanttTask[];
@@ -21,11 +27,6 @@ const emit = defineEmits<{
   taskClick: [task: GanttTask];
 }>();
 
-/** Mirrors koyori-arc-core display_list constants */
-const ROW_H = 40;
-const HEADER_H = 30;
-const LEGEND_H = 40;
-
 const ready = ref(false);
 const svg = ref('');
 const scrollY = ref(0);
@@ -33,6 +34,9 @@ const clientHeight = ref(600);
 const scrollRef = ref<HTMLElement | null>(null);
 const canvasRef = ref<HTMLCanvasElement | null>(null);
 const hitRegions = ref<TaskHitRegion[]>([]);
+const canvasFallbackSvg = ref('');
+const canvasError = ref('');
+const canvasFailureMessage = ref('');
 
 const useCanvas = computed(() => props.backend === 'canvas');
 
@@ -58,8 +62,8 @@ const deviceTier = detectDeviceTier();
 const useVirtualization = computed(() => deviceTier === 'low');
 
 const chartHeight = computed(() => {
-  if (props.tasks.length === 0) return 0;
-  return props.tasks.length * ROW_H + HEADER_H + LEGEND_H + 10;
+  if (canvasError.value) return 0;
+  return chartHeightForTaskCount(props.tasks.length);
 });
 
 const viewportJson = computed(() => {
@@ -92,13 +96,77 @@ const canvasCommandsJson = computed(() => {
 
 watch(svgHtml, (v) => { svg.value = v; }, { immediate: true });
 
+function resetCanvas(canvas: HTMLCanvasElement | null) {
+  hitRegions.value = [];
+  resetCanvasElement(canvas);
+}
+
+function clearCanvasFailure() {
+  canvasFallbackSvg.value = '';
+  canvasError.value = '';
+  canvasFailureMessage.value = '';
+}
+
+function renderCanvasFallback(message: string) {
+  canvasFailureMessage.value = message;
+  let fallbackSvg = '';
+  if (isCanvasCapacityError(message)) {
+    try {
+      fallbackSvg = render_svg(
+        JSON.stringify(props.tasks),
+        JSON.stringify(props.deps ?? []),
+        props.today ?? undefined,
+        JSON.stringify({
+          scroll_y: scrollY.value,
+          client_height: Math.min(clientHeight.value, 600),
+        }),
+      );
+    } catch {
+      // resolveCanvasFailure turns a failed fallback into a visible error.
+    }
+  }
+  const resolution = resolveCanvasFailure(message, fallbackSvg);
+  if (resolution.mode === 'svg') {
+    canvasFallbackSvg.value = resolution.svg;
+    canvasError.value = '';
+  } else {
+    canvasFallbackSvg.value = '';
+    canvasError.value = resolution.message;
+  }
+}
+
+watch([scrollY, clientHeight], () => {
+  if (canvasFallbackSvg.value && canvasFailureMessage.value) {
+    renderCanvasFallback(canvasFailureMessage.value);
+  }
+});
+
 async function paintCanvas() {
-  const canvas = canvasRef.value;
   const json = canvasCommandsJson.value;
-  if (!canvas || !json) return;
+  if (!json) {
+    resetCanvas(canvasRef.value);
+    clearCanvasFailure();
+    return;
+  }
+
+  let canvas = canvasRef.value;
+  if (!canvas) {
+    // A fallback/error replaces the canvas with v-if. Clear it first, then
+    // wait for Vue to mount a fresh canvas before replaying recovered output.
+    clearCanvasFailure();
+    await nextTick();
+    canvas = canvasRef.value;
+    if (!canvas) return;
+  }
 
   const buffer = parseCommandBuffer(json);
-  if (buffer.error) return;
+  if (buffer.error) {
+    resetCanvas(canvas);
+    renderCanvasFallback(buffer.error);
+    return;
+  }
+
+  clearCanvasFailure();
 
   canvas.width = buffer.viewport_width;
   canvas.height = buffer.viewport_height;
@@ -106,7 +174,10 @@ async function paintCanvas() {
   canvas.style.height = `${buffer.viewport_height}px`;
 
   const ctx = canvas.getContext('2d');
-  if (!ctx) return;
+  if (!ctx) {
+    resetCanvas(canvas);
+    return;
+  }
   const result = replayCommands(ctx, buffer);
   hitRegions.value = result.hitRegions;
 }
@@ -143,7 +214,7 @@ function onCanvasClick(e: MouseEvent) {
 </script>
 
 <template>
-  <div class="koyori-gantt" @click="!useCanvas && onSvgClick($event)">
+  <div class="koyori-gantt" @click="(!useCanvas || canvasFallbackSvg) && onSvgClick($event)">
     <div v-if="!ready" class="koyori-gantt-skeleton" aria-hidden="true">
       <div v-for="task in props.tasks" :key="task.id" class="koyori-gantt-skeleton-row">
         <div class="koyori-gantt-skeleton-label" />
@@ -154,15 +225,19 @@ function onCanvasClick(e: MouseEvent) {
     v-else
     ref="scrollRef"
     class="koyori-gantt-scroll"
-    :class="{ 'koyori-gantt-scroll--virtual': useVirtualization }"
+    :class="{ 'koyori-gantt-scroll--virtual': useVirtualization || canvasFailureMessage }"
     @scroll="onScroll"
   >
+    <div v-if="canvasError" class="koyori-gantt-error" role="alert">
+      Unable to render Gantt chart: {{ canvasError }}
+    </div>
     <div
+      v-else
       class="koyori-gantt-inner"
       :style="{ height: `${chartHeight}px` }"
     >
       <canvas
-        v-if="useCanvas"
+        v-if="useCanvas && !canvasFallbackSvg"
         ref="canvasRef"
         class="koyori-gantt-canvas"
         role="img"
@@ -170,7 +245,7 @@ function onCanvasClick(e: MouseEvent) {
         @click="onCanvasClick"
       />
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <div v-else class="koyori-gantt-svg" v-html="svg" />
+      <div v-else class="koyori-gantt-svg" v-html="canvasFallbackSvg || svg" />
     </div>
   </div>
   </div>
@@ -188,6 +263,10 @@ function onCanvasClick(e: MouseEvent) {
   position: relative;
   width: 100%;
 }
+.koyori-gantt-error {
+  padding: 12px;
+  color: #991b1b;
+}
 .koyori-gantt-svg {
   position: absolute;
   top: 0;
diff --git a/packages/arc-vue/src/canvasFallback.test.ts b/packages/arc-vue/src/canvasFallback.test.ts
new file mode 100644
index 0000000..6a1c6d1
--- /dev/null
+++ b/packages/arc-vue/src/canvasFallback.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+import { chartHeightForTaskCount, resolveCanvasFailure } from './canvasFallback';
+
+describe('resolveCanvasFailure', () => {
+  it.each([408, 1_000, 10_000])(
+    'uses a non-empty SVG fallback when %i tasks exceed Canvas capacity',
+    (taskCount) => {
+      const height = chartHeightForTaskCount(taskCount);
+      const svg = `<svg width="800" height="${height}"><g data-task-id="task-0" /></svg>`;
+      expect(resolveCanvasFailure(
+        'canvas row count exceeds limit (407 rows / 16384px)',
+        svg,
+      )).toEqual({ mode: 'svg', svg });
+      expect(svg).toContain(`height="${height}"`);
+    },
+  );
+
+  it('resets the scroll domain for empty content', () => {
+    expect(chartHeightForTaskCount(0)).toBe(0);
+    expect(chartHeightForTaskCount(408)).toBe(16_400);
+  });
+
+  it('shows an error when the shared task limit rejects SVG too', () => {
+    expect(resolveCanvasFailure(
+      'task count exceeds limit (10000)',
+      '<svg width="0" height="0"></svg>',
+    )).toEqual({ mode: 'error', message: 'task count exceeds limit (10000)' });
+  });
+
+  it('shows an error when SVG fallback unexpectedly renders empty', () => {
+    expect(resolveCanvasFailure(
+      'canvas area exceeds limit (33554432 pixels)',
+      '<svg width="0" height="0"></svg>',
+    )).toEqual({
+      mode: 'error',
+      message: 'canvas area exceeds limit (33554432 pixels)',
+    });
+  });
+});
diff --git a/packages/arc-vue/src/canvasFallback.ts b/packages/arc-vue/src/canvasFallback.ts
new file mode 100644
index 0000000..eac7ab5
--- /dev/null
+++ b/packages/arc-vue/src/canvasFallback.ts
@@ -0,0 +1,26 @@
+export type CanvasFailureResolution =
+  | { mode: 'svg'; svg: string }
+  | { mode: 'error'; message: string };
+
+export function chartHeightForTaskCount(taskCount: number): number {
+  return taskCount === 0 ? 0 : taskCount * 40 + 30 + 40 + 10;
+}
+
+/** Canvas capacity errors can use the independently bounded SVG renderer. */
+export function isCanvasCapacityError(message: string): boolean {
+  return /^canvas (row count|date range|area) exceeds limit/.test(message);
+}
+
+export function resolveCanvasFailure(
+  message: string,
+  fallbackSvg: string,
+): CanvasFailureResolution {
+  if (
+    isCanvasCapacityError(message)
+    && fallbackSvg.includes('<svg ')
+    && !fallbackSvg.includes('width="0"')
+  ) {
+    return { mode: 'svg', svg: fallbackSvg };
+  }
+  return { mode: 'error', message };
+}
diff --git a/packages/arc-vue/src/canvasLifecycle.test.ts b/packages/arc-vue/src/canvasLifecycle.test.ts
new file mode 100644
index 0000000..e068c81
--- /dev/null
+++ b/packages/arc-vue/src/canvasLifecycle.test.ts
@@ -0,0 +1,27 @@
+import { describe, expect, it, vi } from 'vitest';
+import { resetCanvasElement } from './canvasLifecycle';
+
+function paintedCanvas() {
+  const clearRect = vi.fn();
+  const canvas = {
+    width: 1200,
+    height: 800,
+    style: { width: '1200px', height: '800px' },
+    getContext: vi.fn(() => ({ clearRect })),
+  };
+  return { canvas, clearRect };
+}
+
+describe('resetCanvasElement', () => {
+  it.each(['empty', 'error'])('removes bitmap and CSS dimensions on success -> %s', () => {
+    const { canvas, clearRect } = paintedCanvas();
+
+    resetCanvasElement(canvas as unknown as HTMLCanvasElement);
+
+    expect(clearRect).toHaveBeenCalledWith(0, 0, 1200, 800);
+    expect(canvas.width).toBe(0);
+    expect(canvas.height).toBe(0);
+    expect(canvas.style.width).toBe('0px');
+    expect(canvas.style.height).toBe('0px');
+  });
+});
diff --git a/packages/arc-vue/src/canvasLifecycle.ts b/packages/arc-vue/src/canvasLifecycle.ts
new file mode 100644
index 0000000..4cbe8ad
--- /dev/null
+++ b/packages/arc-vue/src/canvasLifecycle.ts
@@ -0,0 +1,14 @@
+type ResettableCanvas = Pick<HTMLCanvasElement, 'width' | 'height' | 'style' | 'getContext'>;
+
+/** Clear both the drawing buffer and its layout footprint after empty/error output. */
+export function resetCanvasElement(canvas: ResettableCanvas | null): void {
+  if (!canvas) return;
+  const ctx = canvas.getContext('2d');
+  if (ctx) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  }
+  canvas.width = 0;
+  canvas.height = 0;
+  canvas.style.width = '0px';
+  canvas.style.height = '0px';
+}
diff --git a/packages/arc-vue/src/replayCommands.test.ts b/packages/arc-vue/src/replayCommands.test.ts
index 91a670d..2726bf3 100644
--- a/packages/arc-vue/src/replayCommands.test.ts
+++ b/packages/arc-vue/src/replayCommands.test.ts
@@ -75,6 +75,12 @@ function createMockCtx() {
 }
 
 describe('replayCommands', () => {
+  it('parseCommandBuffer returns error buffer for invalid json', () => {
+    const buffer = parseCommandBuffer('not json');
+    expect(buffer.error).toBe('invalid json');
+    expect(buffer.ops).toEqual([]);
+  });
+
   it('parses golden CommandBuffer JSON', () => {
     const buffer = parseCommandBuffer(goldenJson);
     expect(buffer.viewport_width).toBe(350);
diff --git a/packages/arc-vue/src/replayCommands.ts b/packages/arc-vue/src/replayCommands.ts
index 6cd9118..65097fe 100644
--- a/packages/arc-vue/src/replayCommands.ts
+++ b/packages/arc-vue/src/replayCommands.ts
@@ -249,7 +249,17 @@ export function replayCommands(
 }
 
 export function parseCommandBuffer(json: string): CommandBuffer {
-  return JSON.parse(json) as CommandBuffer;
+  try {
+    return JSON.parse(json) as CommandBuffer;
+  } catch {
+    return {
+      viewport_width: 0,
+      viewport_height: 0,
+      ops: [],
+      palette: { colors: [] },
+      error: 'invalid json',
+    };
+  }
 }
 
 export function findTaskAtPoint(