samcan 0.0.2 → 0.1.0

package/dist/shared/chunk-s3qdcmcq.js

@@ -0,0 +1,1392 @@
+import {
+  transform_point_transform
+} from "./chunk-8ynnz57m.js";
+import {
+  create_rectangle
+} from "./chunk-35pkr0zs.js";
+import {
+  line_cap_round,
+  line_cap_square,
+  line_join_bevel,
+  line_join_round
+} from "./chunk-wa3772hp.js";
+import {
+  to_rgba_string_color
+} from "./chunk-v53jprrn.js";
+
+// renderer/path.ts
+var path_move = 0;
+var path_line = 1;
+var path_cubic = 2;
+var path_close = 3;
+function create_path() {
+  return {
+    commands: [],
+    bounds: create_rectangle(0, 0, 0, 0)
+  };
+}
+function clone_path(p) {
+  return {
+    commands: [...p.commands],
+    bounds: [...p.bounds]
+  };
+}
+function move_to_path(p, x, y) {
+  const new_commands = [...p.commands, [path_move, x, y]];
+  return {
+    commands: new_commands,
+    bounds: calculate_bounds_of_path(new_commands)
+  };
+}
+function line_to_path(p, x, y) {
+  const new_commands = [...p.commands, [path_line, x, y]];
+  return {
+    commands: new_commands,
+    bounds: calculate_bounds_of_path(new_commands)
+  };
+}
+function cubic_to_path(p, c1x, c1y, c2x, c2y, x, y) {
+  const new_commands = [...p.commands, [path_cubic, c1x, c1y, c2x, c2y, x, y]];
+  return {
+    commands: new_commands,
+    bounds: calculate_bounds_of_path(new_commands)
+  };
+}
+function close_path(p) {
+  const new_commands = [...p.commands, [path_close]];
+  return {
+    commands: new_commands,
+    bounds: p.bounds
+  };
+}
+function bounds_of_path(p) {
+  return p.bounds;
+}
+function is_empty_path(p) {
+  return p.commands.length === 0;
+}
+function command_count_of_path(p) {
+  return p.commands.length;
+}
+function transform_path(p, t, out) {
+  const transformed_commands = [];
+  for (let i = 0;i < p.commands.length; i = i + 1) {
+    const cmd = p.commands[i];
+    if (cmd !== undefined) {
+      transformed_commands.push(transform_command(cmd, t));
+    }
+  }
+  const result = {
+    commands: transformed_commands,
+    bounds: calculate_bounds_of_path(transformed_commands)
+  };
+  Object.assign(out, result);
+  return out;
+}
+function hash_of_path(p) {
+  let hash = 0;
+  for (let i = 0;i < p.commands.length; i = i + 1) {
+    const cmd = p.commands[i];
+    if (cmd !== undefined) {
+      hash = hash * 31 + hash_command(cmd);
+    }
+  }
+  return hash;
+}
+function from_rectangle_path(r) {
+  const commands = [
+    [path_move, r[0], r[1]],
+    [path_line, r[0] + r[2], r[1]],
+    [path_line, r[0] + r[2], r[1] + r[3]],
+    [path_line, r[0], r[1] + r[3]],
+    [path_close]
+  ];
+  return {
+    commands,
+    bounds: [...r]
+  };
+}
+function from_circle_path(c, segments) {
+  const commands = [];
+  const cx = c[0];
+  const cy = c[1];
+  const r = c[2];
+  if (segments < 3) {
+    return create_path();
+  }
+  const kappa = 4 / 3 * Math.tan(Math.PI / (2 * segments));
+  for (let i = 0;i < segments; i = i + 1) {
+    const angle1 = 2 * Math.PI * i / segments;
+    const angle2 = 2 * Math.PI * (i + 1) / segments;
+    const x1 = cx + r * Math.cos(angle1);
+    const y1 = cy + r * Math.sin(angle1);
+    const x2 = cx + r * Math.cos(angle2);
+    const y2 = cy + r * Math.sin(angle2);
+    const cos1 = Math.cos(angle1);
+    const sin1 = Math.sin(angle1);
+    const cos2 = Math.cos(angle2);
+    const sin2 = Math.sin(angle2);
+    const c1x = x1 - r * kappa * sin1;
+    const c1y = y1 + r * kappa * cos1;
+    const c2x = x2 + r * kappa * sin2;
+    const c2y = y2 - r * kappa * cos2;
+    if (i === 0) {
+      commands.push([path_move, x1, y1]);
+    }
+    commands.push([path_cubic, c1x, c1y, c2x, c2y, x2, y2]);
+  }
+  commands.push([path_close]);
+  const bounds = create_rectangle(cx - r, cy - r, r * 2, r * 2);
+  return {
+    commands,
+    bounds
+  };
+}
+function from_polyline_path(points, closed) {
+  if (points.length === 0) {
+    return create_path();
+  }
+  const commands = [];
+  const first_point = points[0];
+  if (first_point !== undefined) {
+    commands.push([path_move, first_point[0], first_point[1]]);
+  }
+  for (let i = 1;i < points.length; i = i + 1) {
+    const point = points[i];
+    if (point !== undefined) {
+      commands.push([path_line, point[0], point[1]]);
+    }
+  }
+  if (closed && points.length > 2) {
+    commands.push([path_close]);
+  }
+  return {
+    commands,
+    bounds: calculate_bounds_of_path(commands)
+  };
+}
+function calculate_bounds_of_path(commands) {
+  if (commands.length === 0) {
+    return create_rectangle(0, 0, 0, 0);
+  }
+  let min_x = Infinity;
+  let min_y = Infinity;
+  let max_x = -Infinity;
+  let max_y = -Infinity;
+  for (let i = 0;i < commands.length; i = i + 1) {
+    const cmd = commands[i];
+    if (cmd === undefined) {
+      continue;
+    }
+    const type = cmd[0];
+    if (type === path_move || type === path_line) {
+      const cmd_move_line = cmd;
+      const x = cmd_move_line[1];
+      const y = cmd_move_line[2];
+      min_x = Math.min(min_x, x);
+      min_y = Math.min(min_y, y);
+      max_x = Math.max(max_x, x);
+      max_y = Math.max(max_y, y);
+    } else if (type === path_cubic) {
+      const cmd_cubic = cmd;
+      const c1x = cmd_cubic[1];
+      const c1y = cmd_cubic[2];
+      const c2x = cmd_cubic[3];
+      const c2y = cmd_cubic[4];
+      const x = cmd_cubic[5];
+      const y = cmd_cubic[6];
+      min_x = Math.min(min_x, c1x, c2x, x);
+      min_y = Math.min(min_y, c1y, c2y, y);
+      max_x = Math.max(max_x, c1x, c2x, x);
+      max_y = Math.max(max_y, c1y, c2y, y);
+    }
+  }
+  if (min_x === Infinity) {
+    return create_rectangle(0, 0, 0, 0);
+  }
+  return create_rectangle(min_x, min_y, max_x - min_x, max_y - min_y);
+}
+function transform_command(cmd, t) {
+  const type = cmd[0];
+  if (type === path_move || type === path_line) {
+    const cmd_move_line = cmd;
+    const p1 = [cmd_move_line[1], cmd_move_line[2]];
+    const out1 = [0, 0];
+    transform_point_transform(t, p1, out1);
+    return [type, out1[0], out1[1]];
+  } else if (type === path_cubic) {
+    const cmd_cubic = cmd;
+    const p1 = [cmd_cubic[1], cmd_cubic[2]];
+    const p2 = [cmd_cubic[3], cmd_cubic[4]];
+    const p3 = [cmd_cubic[5], cmd_cubic[6]];
+    const out1 = [0, 0];
+    const out2 = [0, 0];
+    const out3 = [0, 0];
+    transform_point_transform(t, p1, out1);
+    transform_point_transform(t, p2, out2);
+    transform_point_transform(t, p3, out3);
+    return [path_cubic, out1[0], out1[1], out2[0], out2[1], out3[0], out3[1]];
+  } else {
+    return cmd;
+  }
+}
+function hash_command(cmd) {
+  const type = cmd[0];
+  let hash = type * 31;
+  if (type === path_move || type === path_line) {
+    const cmd_move_line = cmd;
+    hash = hash * 31 + Math.floor(cmd_move_line[1] * 1000);
+    hash = hash * 31 + Math.floor(cmd_move_line[2] * 1000);
+  } else if (type === path_cubic) {
+    const cmd_cubic = cmd;
+    hash = hash * 31 + Math.floor(cmd_cubic[1] * 1000);
+    hash = hash * 31 + Math.floor(cmd_cubic[2] * 1000);
+    hash = hash * 31 + Math.floor(cmd_cubic[3] * 1000);
+    hash = hash * 31 + Math.floor(cmd_cubic[4] * 1000);
+    hash = hash * 31 + Math.floor(cmd_cubic[5] * 1000);
+    hash = hash * 31 + Math.floor(cmd_cubic[6] * 1000);
+  }
+  return hash;
+}
+
+// renderer/webgl/lifecycle.ts
+function begin_frame_webgl(state) {
+  state.vertex_count = 0;
+  state.index_count = 0;
+  state.scissor_enabled = false;
+  state.gl.disable(state.gl.SCISSOR_TEST);
+}
+function end_frame_webgl(state) {
+  if (state.index_count > 0) {
+    flush_webgl(state);
+  }
+}
+function flush_webgl(state) {
+  if (state.index_count === 0) {
+    return;
+  }
+  const gl = state.gl;
+  gl.useProgram(state.program);
+  gl.uniformMatrix3fv(state.program_locations.transform, false, state.current_transform);
+  gl.uniform2f(state.program_locations.resolution, state.width, state.height);
+  gl.bindBuffer(gl.ARRAY_BUFFER, state.position_buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, state.vertices.subarray(0, state.vertex_count * 2), gl.DYNAMIC_DRAW);
+  gl.enableVertexAttribArray(state.program_locations.position);
+  gl.vertexAttribPointer(state.program_locations.position, 2, gl.FLOAT, false, 0, 0);
+  gl.bindBuffer(gl.ARRAY_BUFFER, state.color_buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, state.colors.subarray(0, state.vertex_count * 4), gl.DYNAMIC_DRAW);
+  gl.enableVertexAttribArray(state.program_locations.color);
+  gl.vertexAttribPointer(state.program_locations.color, 4, gl.FLOAT, false, 0, 0);
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, state.index_buffer);
+  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, state.indices.subarray(0, state.index_count), gl.DYNAMIC_DRAW);
+  gl.drawElements(gl.TRIANGLES, state.index_count, gl.UNSIGNED_SHORT, 0);
+  state.vertex_count = 0;
+  state.index_count = 0;
+}
+function clip_rectangle_webgl(state, r) {
+  if (state.index_count > 0) {
+    flush_webgl(state);
+  }
+  state.scissor_enabled = true;
+  state.gl.enable(state.gl.SCISSOR_TEST);
+  state.gl.scissor(Math.floor(r[0] * state.pixel_ratio), Math.floor((state.height - r[1] - r[3]) * state.pixel_ratio), Math.ceil(r[2] * state.pixel_ratio), Math.ceil(r[3] * state.pixel_ratio));
+}
+function clear_webgl(state, c) {
+  if (state.index_count > 0) {
+    flush_webgl(state);
+  }
+  state.gl.clearColor(c[0], c[1], c[2], c[3]);
+  state.gl.clear(state.gl.COLOR_BUFFER_BIT);
+}
+function resize_webgl(state, width, height, pixel_ratio) {
+  state.width = width;
+  state.height = height;
+  state.pixel_ratio = pixel_ratio;
+  state.canvas.width = width * pixel_ratio;
+  state.canvas.height = height * pixel_ratio;
+  state.canvas.style.width = width + "px";
+  state.canvas.style.height = height + "px";
+  state.gl.viewport(0, 0, state.canvas.width, state.canvas.height);
+}
+function dispose_webgl(state) {
+  state.fill_cache.clear();
+  state.stroke_cache.clear();
+  for (const texture of state.texture_cache.values()) {
+    state.gl.deleteTexture(texture.texture);
+  }
+  state.texture_cache.clear();
+  state.gl.deleteBuffer(state.position_buffer);
+  state.gl.deleteBuffer(state.color_buffer);
+  state.gl.deleteBuffer(state.texcoord_buffer);
+  state.gl.deleteBuffer(state.index_buffer);
+  state.gl.deleteProgram(state.program);
+  state.gl.deleteProgram(state.texture_program);
+}
+
+// renderer/webgl/batches.ts
+function draw_cached_triangles_webgl(state, cached, color, alpha) {
+  if (cached.index_count === 0) {
+    return;
+  }
+  const added_vertices = new Int32Array(cached.vertex_count);
+  for (let i = 0;i < cached.vertex_count; i = i + 1) {
+    added_vertices[i] = -1;
+  }
+  for (let tri = 0;tri < cached.index_count; tri = tri + 3) {
+    const i0 = cached.indices[tri];
+    const i1 = cached.indices[tri + 1];
+    const i2 = cached.indices[tri + 2];
+    if (i0 === undefined || i1 === undefined || i2 === undefined) {
+      continue;
+    }
+    if (state.vertex_count + 3 > state.max_vertices || state.index_count + 3 > state.max_indices) {
+      flush_webgl(state);
+      for (let i = 0;i < cached.vertex_count; i = i + 1) {
+        added_vertices[i] = -1;
+      }
+    }
+    write_triangle_webgl(state, cached.vertices, added_vertices, [i0, i1, i2], color, alpha);
+    const v0 = added_vertices[i0];
+    const v1 = added_vertices[i1];
+    const v2 = added_vertices[i2];
+    if (v0 !== -1 && v0 !== undefined && v1 !== -1 && v1 !== undefined && v2 !== -1 && v2 !== undefined) {
+      state.indices[state.index_count] = v0;
+      state.indices[state.index_count + 1] = v1;
+      state.indices[state.index_count + 2] = v2;
+      state.index_count = state.index_count + 3;
+    }
+  }
+}
+function write_triangle_webgl(state, vertices, added_vertices, indices, color, alpha) {
+  for (let i = 0;i < indices.length; i = i + 1) {
+    const idx = indices[i];
+    if (idx === undefined || added_vertices[idx] !== -1) {
+      continue;
+    }
+    const vx = vertices[idx * 2];
+    const vy = vertices[idx * 2 + 1];
+    if (vx !== undefined && vy !== undefined) {
+      state.vertices[state.vertex_count * 2] = vx;
+      state.vertices[state.vertex_count * 2 + 1] = vy;
+      state.colors[state.vertex_count * 4] = color[0];
+      state.colors[state.vertex_count * 4 + 1] = color[1];
+      state.colors[state.vertex_count * 4 + 2] = color[2];
+      state.colors[state.vertex_count * 4 + 3] = color[3] * alpha;
+      added_vertices[idx] = state.vertex_count;
+      state.vertex_count = state.vertex_count + 1;
+    }
+  }
+}
+
+// renderer/webgl/triangles.ts
+function triangulate_polygon_earcut(vertices) {
+  if (vertices.length < 6) {
+    return [];
+  }
+  const n = vertices.length / 2;
+  if (n === 3) {
+    return [0, 1, 2];
+  }
+  let head = null;
+  let last = null;
+  for (let i = 0;i < n; i = i + 1) {
+    const x = vertices[i * 2];
+    const y = vertices[i * 2 + 1];
+    if (x !== undefined && y !== undefined) {
+      const node = { i, x, y, prev: last, next: null };
+      if (last !== null) {
+        last.next = node;
+      } else {
+        head = node;
+      }
+      last = node;
+    }
+  }
+  if (head !== null && last !== null) {
+    head.prev = last;
+    last.next = head;
+  }
+  const indices = [];
+  let ear = head;
+  let count = n * 2;
+  while (count > 0 && ear !== null && ear.next !== ear.prev) {
+    count = count - 1;
+    const prev = ear.prev;
+    const next = ear.next;
+    if (prev !== null && next !== null && is_ear(prev, ear, next)) {
+      indices.push(prev.i, ear.i, next.i);
+      if (prev.next === next) {
+        break;
+      }
+      prev.next = next;
+      next.prev = prev;
+      ear = next;
+    } else {
+      ear = next;
+    }
+  }
+  return indices;
+}
+function is_ear(a, b, c) {
+  const area = (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
+  if (area >= 0) {
+    return false;
+  }
+  let p = c.next;
+  while (p !== null && p !== a) {
+    if (point_in_triangle(a.x, a.y, b.x, b.y, c.x, c.y, p.x, p.y)) {
+      return false;
+    }
+    p = p.next;
+  }
+  return true;
+}
+function point_in_triangle(ax, ay, bx, by, cx, cy, px, py) {
+  const denom = (by - cy) * (ax - cx) + (cx - bx) * (ay - cy);
+  if (denom === 0) {
+    return false;
+  }
+  const a = ((by - cy) * (px - cx) + (cx - bx) * (py - cy)) / denom;
+  const b = ((cy - ay) * (px - cx) + (ax - cx) * (py - cy)) / denom;
+  const c = 1 - a - b;
+  return a >= 0 && b >= 0 && c >= 0;
+}
+
+// renderer/webgl/fills.ts
+function cache_path_fill_webgl(p) {
+  const fill_vertices = [];
+  const fill_colors = [];
+  const fill_indices = [];
+  let current_x = 0;
+  let current_y = 0;
+  let start_x = 0;
+  let start_y = 0;
+  for (let i = 0;i < p.commands.length; i = i + 1) {
+    const cmd = p.commands[i];
+    if (cmd === undefined) {
+      continue;
+    }
+    const type = cmd[0];
+    if (type === path_move) {
+      current_x = cmd[1];
+      current_y = cmd[2];
+      start_x = current_x;
+      start_y = current_y;
+    } else if (type === path_line) {
+      fill_vertices.push(current_x, current_y);
+      current_x = cmd[1];
+      current_y = cmd[2];
+    } else if (type === path_cubic) {
+      const steps = 8;
+      let prev_x = current_x;
+      let prev_y = current_y;
+      for (let step = 1;step <= steps; step = step + 1) {
+        const t = step / steps;
+        const inv_t = 1 - t;
+        const t2 = t * t;
+        const inv_t2 = inv_t * inv_t;
+        const t3 = t2 * t;
+        const inv_t3 = inv_t2 * inv_t;
+        const x = inv_t3 * current_x + 3 * inv_t2 * t * cmd[1] + 3 * inv_t * t2 * cmd[3] + t3 * cmd[5];
+        const y = inv_t3 * current_y + 3 * inv_t2 * t * cmd[2] + 3 * inv_t * t2 * cmd[4] + t3 * cmd[6];
+        fill_vertices.push(prev_x, prev_y);
+        prev_x = x;
+        prev_y = y;
+      }
+      current_x = cmd[5];
+      current_y = cmd[6];
+    } else if (type === path_close) {
+      if (current_x !== start_x || current_y !== start_y) {
+        fill_vertices.push(current_x, current_y);
+      }
+      fill_vertices.push(start_x, start_y);
+    }
+  }
+  if (fill_vertices.length > 0 && (current_x !== start_x || current_y !== start_y)) {
+    fill_vertices.push(start_x, start_y);
+  }
+  const fill_tris = triangulate_polygon_earcut(fill_vertices);
+  for (let i = 0;i < fill_tris.length; i = i + 1) {
+    const tri_index = fill_tris[i];
+    if (tri_index !== undefined) {
+      fill_indices.push(tri_index);
+    }
+  }
+  for (let i = 0;i < fill_vertices.length / 2; i = i + 1) {
+    fill_colors.push(1, 1, 1, 1);
+  }
+  return {
+    vertices: new Float32Array(fill_vertices),
+    colors: new Float32Array(fill_colors),
+    indices: new Uint16Array(fill_indices),
+    vertex_count: fill_vertices.length / 2,
+    index_count: fill_indices.length,
+    path_commands: p.commands
+  };
+}
+function draw_cached_path_fill_webgl(state, cached, color, alpha) {
+  draw_cached_triangles_webgl(state, cached, color, alpha);
+}
+
+// renderer/webgl/strokes.ts
+function cache_path_stroke_webgl(p, stroke_width) {
+  const stroke_vertices = [];
+  const stroke_colors = [];
+  const stroke_indices = [];
+  let current_x = 0;
+  let current_y = 0;
+  let start_x = 0;
+  let start_y = 0;
+  let vertex_offset = 0;
+  for (let i = 0;i < p.commands.length; i = i + 1) {
+    const cmd = p.commands[i];
+    if (cmd === undefined) {
+      continue;
+    }
+    const type = cmd[0];
+    if (type === path_move) {
+      current_x = cmd[1];
+      current_y = cmd[2];
+      start_x = current_x;
+      start_y = current_y;
+    } else if (type === path_line) {
+      add_segment_webgl(stroke_vertices, stroke_indices, vertex_offset, current_x, current_y, cmd[1], cmd[2], stroke_width / 2);
+      vertex_offset = vertex_offset + 4;
+      current_x = cmd[1];
+      current_y = cmd[2];
+    } else if (type === path_cubic) {
+      const steps = 8;
+      let prev_x = current_x;
+      let prev_y = current_y;
+      for (let step = 1;step <= steps; step = step + 1) {
+        const t = step / steps;
+        const inv_t = 1 - t;
+        const t2 = t * t;
+        const inv_t2 = inv_t * inv_t;
+        const t3 = t2 * t;
+        const inv_t3 = inv_t2 * inv_t;
+        const x = inv_t3 * current_x + 3 * inv_t2 * t * cmd[1] + 3 * inv_t * t2 * cmd[3] + t3 * cmd[5];
+        const y = inv_t3 * current_y + 3 * inv_t2 * t * cmd[2] + 3 * inv_t * t2 * cmd[4] + t3 * cmd[6];
+        add_segment_webgl(stroke_vertices, stroke_indices, vertex_offset, prev_x, prev_y, x, y, stroke_width / 2);
+        vertex_offset = vertex_offset + 4;
+        prev_x = x;
+        prev_y = y;
+      }
+      current_x = cmd[5];
+      current_y = cmd[6];
+    } else if (type === path_close) {
+      if (current_x !== start_x || current_y !== start_y) {
+        add_segment_webgl(stroke_vertices, stroke_indices, vertex_offset, current_x, current_y, start_x, start_y, stroke_width / 2);
+        vertex_offset = vertex_offset + 4;
+      }
+    }
+  }
+  for (let i = 0;i < stroke_vertices.length / 2; i = i + 1) {
+    stroke_colors.push(1, 1, 1, 1);
+  }
+  return {
+    vertices: new Float32Array(stroke_vertices),
+    colors: new Float32Array(stroke_colors),
+    indices: new Uint16Array(stroke_indices),
+    vertex_count: stroke_vertices.length / 2,
+    index_count: stroke_indices.length,
+    stroke_width,
+    path_commands: p.commands
+  };
+}
+function draw_cached_path_stroke_webgl(state, cached, color, alpha) {
+  draw_cached_triangles_webgl(state, cached, color, alpha);
+}
+function add_segment_webgl(vertices, indices, base_index, x1, y1, x2, y2, half_width) {
+  add_line_vertices(vertices, x1, y1, x2, y2, half_width);
+  indices.push(base_index, base_index + 1, base_index + 2, base_index + 1, base_index + 3, base_index + 2);
+}
+function add_line_vertices(vertices, x1, y1, x2, y2, half_width) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const len = Math.sqrt(dx * dx + dy * dy);
+  if (len === 0) {
+    vertices.push(x1 - half_width, y1 - half_width, x1 + half_width, y1 - half_width, x1 - half_width, y1 + half_width, x1 + half_width, y1 + half_width);
+    return;
+  }
+  const nx = -dy / len * half_width;
+  const ny = dx / len * half_width;
+  vertices.push(x1 + nx, y1 + ny, x2 + nx, y2 + ny, x1 - nx, y1 - ny, x2 - nx, y2 - ny);
+}
+
+// renderer/webgl/paths.ts
+function draw_path_webgl(state, p, s) {
+  if (s.fill !== null) {
+    const hash = hash_of_path(p);
+    let fill_cached = state.fill_cache.get(hash);
+    if (fill_cached === undefined || !paths_equal(fill_cached.path_commands, p.commands)) {
+      fill_cached = cache_path_fill_webgl(p);
+      update_cache_webgl(state.fill_cache, state.cache_max_size, hash, fill_cached);
+    }
+    draw_cached_path_fill_webgl(state, fill_cached, s.fill, s.alpha);
+  }
+  if (s.stroke !== null && s.stroke_width > 0) {
+    const hash = hash_of_path(p) * 31 + s.stroke_width;
+    let stroke_cached = state.stroke_cache.get(hash);
+    if (stroke_cached === undefined || stroke_cached.stroke_width !== s.stroke_width || !paths_equal(stroke_cached.path_commands, p.commands)) {
+      stroke_cached = cache_path_stroke_webgl(p, s.stroke_width);
+      update_cache_webgl(state.stroke_cache, state.cache_max_size, hash, stroke_cached);
+    }
+    draw_cached_path_stroke_webgl(state, stroke_cached, s.stroke, s.alpha);
+  }
+}
+function update_cache_webgl(cache, max_size, key, value) {
+  if (cache.size >= max_size) {
+    const first_key = cache.keys().next().value;
+    if (first_key !== undefined) {
+      cache.delete(first_key);
+    }
+  }
+  cache.set(key, value);
+}
+function paths_equal(a, b) {
+  if (a.length !== b.length) {
+    return false;
+  }
+  for (let i = 0;i < a.length; i = i + 1) {
+    const cmd_a = a[i];
+    const cmd_b = b[i];
+    if (cmd_a === undefined || cmd_b === undefined) {
+      return false;
+    }
+    if (cmd_a.length !== cmd_b.length) {
+      return false;
+    }
+    for (let j = 0;j < cmd_a.length; j = j + 1) {
+      if (cmd_a[j] !== cmd_b[j]) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+
+// renderer/webgl/shaders.ts
+var vertex_shader_source = `
+  attribute vec2 a_position;
+  attribute vec4 a_color;
+  uniform mat3 u_transform;
+  uniform vec2 u_resolution;
+  varying vec4 v_color;
+  
+  void main() {
+    vec2 position = (u_transform * vec3(a_position, 1.0)).xy;
+    vec2 clip_space = ((position / u_resolution) * 2.0) - 1.0;
+    gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0.0, 1.0);
+    v_color = a_color;
+  }
+`;
+var fragment_shader_source = `
+  precision mediump float;
+  varying vec4 v_color;
+  
+  void main() {
+    gl_FragColor = v_color;
+  }
+`;
+var texture_vertex_shader_source = `
+  attribute vec2 a_position;
+  attribute vec2 a_texcoord;
+  uniform mat3 u_transform;
+  uniform vec2 u_resolution;
+  varying vec2 v_texcoord;
+  
+  void main() {
+    vec2 position = (u_transform * vec3(a_position, 1.0)).xy;
+    vec2 clip_space = ((position / u_resolution) * 2.0) - 1.0;
+    gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0.0, 1.0);
+    v_texcoord = a_texcoord;
+  }
+`;
+var texture_fragment_shader_source = `
+  precision mediump float;
+  uniform sampler2D u_image;
+  uniform float u_alpha;
+  varying vec2 v_texcoord;
+  
+  void main() {
+    gl_FragColor = texture2D(u_image, v_texcoord);
+    gl_FragColor.a *= u_alpha;
+  }
+`;
+function create_color_program_webgl(gl) {
+  const program = create_shader_program(gl, vertex_shader_source, fragment_shader_source);
+  if (program === null) {
+    return null;
+  }
+  const position = gl.getAttribLocation(program, "a_position");
+  const color = gl.getAttribLocation(program, "a_color");
+  const transform = gl.getUniformLocation(program, "u_transform");
+  const resolution = gl.getUniformLocation(program, "u_resolution");
+  if (position < 0 || color < 0 || transform === null || resolution === null) {
+    gl.deleteProgram(program);
+    return null;
+  }
+  return {
+    program,
+    locations: { position, color, transform, resolution }
+  };
+}
+function create_texture_program_webgl(gl) {
+  const program = create_shader_program(gl, texture_vertex_shader_source, texture_fragment_shader_source);
+  if (program === null) {
+    return null;
+  }
+  const position = gl.getAttribLocation(program, "a_position");
+  const texcoord = gl.getAttribLocation(program, "a_texcoord");
+  const transform = gl.getUniformLocation(program, "u_transform");
+  const resolution = gl.getUniformLocation(program, "u_resolution");
+  const alpha = gl.getUniformLocation(program, "u_alpha");
+  const sampler = gl.getUniformLocation(program, "u_image");
+  if (position < 0 || texcoord < 0 || transform === null || resolution === null || alpha === null || sampler === null) {
+    gl.deleteProgram(program);
+    return null;
+  }
+  return {
+    program,
+    locations: { position, texcoord, transform, resolution, alpha, sampler }
+  };
+}
+function create_shader_program(gl, vertex_source, fragment_source) {
+  const vertex_shader = compile_shader(gl, vertex_source, gl.VERTEX_SHADER);
+  const fragment_shader = compile_shader(gl, fragment_source, gl.FRAGMENT_SHADER);
+  if (vertex_shader === null || fragment_shader === null) {
+    return null;
+  }
+  const program = gl.createProgram();
+  if (program === null) {
+    return null;
+  }
+  gl.attachShader(program, vertex_shader);
+  gl.attachShader(program, fragment_shader);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    gl.deleteProgram(program);
+    return null;
+  }
+  return program;
+}
+function compile_shader(gl, source, type) {
+  const shader = gl.createShader(type);
+  if (shader === null) {
+    return null;
+  }
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+}
+
+// renderer/webgl/shapes.ts
+function draw_rectangle_webgl(state, r, s) {
+  const x = r[0];
+  const y = r[1];
+  const w = r[2];
+  const h = r[3];
+  if (s.fill !== null) {
+    add_quad_webgl(state, x, y, x + w, y, x + w, y + h, x, y + h, s.fill, s.alpha);
+  }
+  if (s.stroke !== null && s.stroke_width > 0) {
+    const sw = s.stroke_width;
+    add_quad_webgl(state, x - sw, y - sw, x + w + sw, y - sw, x + w + sw, y, x - sw, y, s.stroke, s.alpha);
+    add_quad_webgl(state, x + w, y, x + w + sw, y, x + w + sw, y + h, x + w, y + h, s.stroke, s.alpha);
+    add_quad_webgl(state, x - sw, y + h, x + w + sw, y + h, x + w + sw, y + h + sw, x - sw, y + h + sw, s.stroke, s.alpha);
+    add_quad_webgl(state, x - sw, y, x, y, x, y + h, x - sw, y + h, s.stroke, s.alpha);
+  }
+}
+function draw_circle_webgl(state, c, s) {
+  const cx = c[0];
+  const cy = c[1];
+  const r = c[2];
+  const segments = 32;
+  if (s.fill !== null) {
+    const base_vertex = state.vertex_count;
+    write_vertex_webgl(state, cx, cy, s.fill, s.alpha);
+    for (let i = 0;i <= segments; i = i + 1) {
+      const angle = i / segments * Math.PI * 2;
+      write_vertex_webgl(state, cx + Math.cos(angle) * r, cy + Math.sin(angle) * r, s.fill, s.alpha);
+    }
+    for (let i = 0;i < segments; i = i + 1) {
+      state.indices[state.index_count] = base_vertex;
+      state.indices[state.index_count + 1] = base_vertex + i + 1;
+      state.indices[state.index_count + 2] = base_vertex + i + 2;
+      state.index_count = state.index_count + 3;
+    }
+  }
+  if (s.stroke !== null && s.stroke_width > 0 && r > 0) {
+    const outer_r = r + s.stroke_width;
+    const base_vertex = state.vertex_count;
+    for (let i = 0;i <= segments; i = i + 1) {
+      const angle = i / segments * Math.PI * 2;
+      const cos = Math.cos(angle);
+      const sin = Math.sin(angle);
+      write_vertex_webgl(state, cx + cos * r, cy + sin * r, s.stroke, s.alpha);
+      write_vertex_webgl(state, cx + cos * outer_r, cy + sin * outer_r, s.stroke, s.alpha);
+    }
+    for (let i = 0;i < segments; i = i + 1) {
+      const base = base_vertex + i * 2;
+      state.indices[state.index_count] = base;
+      state.indices[state.index_count + 1] = base + 1;
+      state.indices[state.index_count + 2] = base + 2;
+      state.indices[state.index_count + 3] = base + 1;
+      state.indices[state.index_count + 4] = base + 3;
+      state.indices[state.index_count + 5] = base + 2;
+      state.index_count = state.index_count + 6;
+    }
+  }
+}
+function draw_line_webgl(state, a, b, s) {
+  if (s.stroke === null || s.stroke_width <= 0) {
+    return;
+  }
+  const dx = b[0] - a[0];
+  const dy = b[1] - a[1];
+  const len = Math.sqrt(dx * dx + dy * dy);
+  if (len === 0) {
+    return;
+  }
+  const width = s.stroke_width / 2;
+  const nx = -dy / len * width;
+  const ny = dx / len * width;
+  add_quad_webgl(state, a[0] + nx, a[1] + ny, b[0] + nx, b[1] + ny, b[0] - nx, b[1] - ny, a[0] - nx, a[1] - ny, s.stroke, s.alpha);
+}
+function draw_polyline_webgl(state, points, s) {
+  if (points.length < 2 || s.stroke === null || s.stroke_width <= 0) {
+    return;
+  }
+  for (let i = 0;i < points.length - 1; i = i + 1) {
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    if (p1 !== undefined && p2 !== undefined) {
+      draw_line_webgl(state, p1, p2, s);
+    }
+  }
+}
+function add_quad_webgl(state, x1, y1, x2, y2, x3, y3, x4, y4, color, alpha) {
+  if (state.vertex_count + 4 > state.max_vertices || state.index_count + 6 > state.max_indices) {
+    flush_webgl(state);
+  }
+  const base = state.vertex_count;
+  write_vertex_webgl(state, x1, y1, color, alpha);
+  write_vertex_webgl(state, x2, y2, color, alpha);
+  write_vertex_webgl(state, x3, y3, color, alpha);
+  write_vertex_webgl(state, x4, y4, color, alpha);
+  state.indices[state.index_count] = base;
+  state.indices[state.index_count + 1] = base + 1;
+  state.indices[state.index_count + 2] = base + 2;
+  state.indices[state.index_count + 3] = base + 1;
+  state.indices[state.index_count + 4] = base + 3;
+  state.indices[state.index_count + 5] = base + 2;
+  state.index_count = state.index_count + 6;
+}
+function write_vertex_webgl(state, x, y, color, alpha) {
+  state.vertices[state.vertex_count * 2] = x;
+  state.vertices[state.vertex_count * 2 + 1] = y;
+  state.colors[state.vertex_count * 4] = color[0];
+  state.colors[state.vertex_count * 4 + 1] = color[1];
+  state.colors[state.vertex_count * 4 + 2] = color[2];
+  state.colors[state.vertex_count * 4 + 3] = color[3] * alpha;
+  state.vertex_count = state.vertex_count + 1;
+}
+
+// renderer/webgl/textures.ts
+function draw_image_webgl(state, image, r, opacity, version) {
+  const texture = sync_texture_webgl(state, image, version);
+  if (texture === null) {
+    return;
+  }
+  if (state.index_count > 0) {
+    flush_webgl(state);
+  }
+  const gl = state.gl;
+  gl.useProgram(state.texture_program);
+  gl.uniformMatrix3fv(state.texture_locations.transform, false, state.current_transform);
+  gl.uniform2f(state.texture_locations.resolution, state.width, state.height);
+  gl.uniform1f(state.texture_locations.alpha, opacity);
+  const x = r[0];
+  const y = r[1];
+  const w = r[2];
+  const h = r[3];
+  const positions = new Float32Array([x, y, x + w, y, x, y + h, x, y + h, x + w, y, x + w, y + h]);
+  const texcoords = new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]);
+  gl.bindBuffer(gl.ARRAY_BUFFER, state.position_buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.DYNAMIC_DRAW);
+  gl.enableVertexAttribArray(state.texture_locations.position);
+  gl.vertexAttribPointer(state.texture_locations.position, 2, gl.FLOAT, false, 0, 0);
+  gl.bindBuffer(gl.ARRAY_BUFFER, state.texcoord_buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, texcoords, gl.DYNAMIC_DRAW);
+  gl.enableVertexAttribArray(state.texture_locations.texcoord);
+  gl.vertexAttribPointer(state.texture_locations.texcoord, 2, gl.FLOAT, false, 0, 0);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, texture.texture);
+  gl.uniform1i(state.texture_locations.sampler, 0);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+}
+function sync_texture_webgl(state, image, version) {
+  if (!is_image_ready_webgl(image)) {
+    return null;
+  }
+  const gl = state.gl;
+  const width = image instanceof HTMLImageElement ? image.naturalWidth : image.width;
+  const height = image instanceof HTMLImageElement ? image.naturalHeight : image.height;
+  const refresh_canvas_each_draw = image instanceof HTMLCanvasElement && version === undefined;
+  const source_key = image_source_key_webgl(image);
+  let texture = state.texture_cache.get(image);
+  if (texture === undefined) {
+    const created = gl.createTexture();
+    if (created === null) {
+      return null;
+    }
+    texture = {
+      texture: created,
+      width,
+      height,
+      version: version ?? null,
+      source_key
+    };
+    state.texture_cache.set(image, texture);
+    gl.bindTexture(gl.TEXTURE_2D, created);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+    return texture;
+  }
+  const size_changed = texture.width !== width || texture.height !== height;
+  const version_changed = version !== undefined && texture.version !== version;
+  const source_changed = texture.source_key !== source_key;
+  if (size_changed || refresh_canvas_each_draw || version_changed || source_changed) {
+    gl.bindTexture(gl.TEXTURE_2D, texture.texture);
+    if (size_changed) {
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+    } else {
+      gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, image);
+    }
+    texture.width = width;
+    texture.height = height;
+    texture.source_key = source_key;
+  }
+  if (version !== undefined) {
+    texture.version = version;
+  }
+  return texture;
+}
+function is_image_ready_webgl(image) {
+  if (image instanceof HTMLImageElement) {
+    return image.complete && image.naturalWidth > 0 && image.naturalHeight > 0;
+  }
+  return image.width > 0 && image.height > 0;
+}
+function image_source_key_webgl(image) {
+  if (image instanceof HTMLImageElement) {
+    return image.currentSrc || image.src || null;
+  }
+  if (typeof ImageBitmap !== "undefined" && image instanceof ImageBitmap) {
+    return `bitmap:${image.width}x${image.height}`;
+  }
+  return null;
+}
+
+// renderer/webgl/transforms.ts
+function set_transform_webgl(state, t) {
+  state.current_transform[0] = t[0];
+  state.current_transform[1] = t[2];
+  state.current_transform[2] = t[4];
+  state.current_transform[3] = t[1];
+  state.current_transform[4] = t[3];
+  state.current_transform[5] = t[5];
+  state.current_transform[6] = 0;
+  state.current_transform[7] = 0;
+  state.current_transform[8] = 1;
+}
+function reset_transform_webgl(state) {
+  state.current_transform[0] = 1;
+  state.current_transform[1] = 0;
+  state.current_transform[2] = 0;
+  state.current_transform[3] = 0;
+  state.current_transform[4] = 1;
+  state.current_transform[5] = 0;
+  state.current_transform[6] = 0;
+  state.current_transform[7] = 0;
+  state.current_transform[8] = 1;
+}
+function save_webgl(state) {
+  const copy = new Float32Array(9);
+  copy.set(state.current_transform);
+  state.transform_stack.push(copy);
+}
+function restore_webgl(state) {
+  const previous = state.transform_stack.pop();
+  if (previous !== undefined) {
+    state.current_transform.set(previous);
+  }
+}
+
+// renderer/canvas/paths.ts
+function get_or_create_path2d_canvas(state, p) {
+  const hash = hash_of_path(p);
+  const cached = state.path_cache.get(hash);
+  if (cached !== undefined && paths_equal2(cached.path_commands, p.commands)) {
+    state.cache_access_counter = state.cache_access_counter + 1;
+    cached.last_used = state.cache_access_counter;
+    return cached.path2d;
+  }
+  const path2d = build_path2d_canvas(p);
+  if (state.path_cache.size >= state.cache_max_size) {
+    evict_lru_canvas(state);
+  }
+  state.cache_access_counter = state.cache_access_counter + 1;
+  state.path_cache.set(hash, {
+    path2d,
+    last_used: state.cache_access_counter,
+    path_commands: p.commands
+  });
+  return path2d;
+}
+function paths_equal2(a, b) {
+  if (a.length !== b.length) {
+    return false;
+  }
+  for (let i = 0;i < a.length; i = i + 1) {
+    const cmd_a = a[i];
+    const cmd_b = b[i];
+    if (cmd_a === undefined || cmd_b === undefined) {
+      return false;
+    }
+    if (cmd_a.length !== cmd_b.length) {
+      return false;
+    }
+    for (let j = 0;j < cmd_a.length; j = j + 1) {
+      if (cmd_a[j] !== cmd_b[j]) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+function build_path2d_canvas(p) {
+  const path2d = new Path2D;
+  for (let i = 0;i < p.commands.length; i = i + 1) {
+    const cmd = p.commands[i];
+    if (cmd === undefined) {
+      continue;
+    }
+    const type = cmd[0];
+    if (type === path_move) {
+      path2d.moveTo(cmd[1], cmd[2]);
+    } else if (type === path_line) {
+      path2d.lineTo(cmd[1], cmd[2]);
+    } else if (type === path_cubic) {
+      path2d.bezierCurveTo(cmd[1], cmd[2], cmd[3], cmd[4], cmd[5], cmd[6]);
+    } else if (type === path_close) {
+      path2d.closePath();
+    }
+  }
+  return path2d;
+}
+function evict_lru_canvas(state) {
+  let oldest_key = null;
+  let oldest_access = Infinity;
+  for (const [key, entry] of state.path_cache) {
+    if (entry.last_used < oldest_access) {
+      oldest_access = entry.last_used;
+      oldest_key = key;
+    }
+  }
+  if (oldest_key !== null) {
+    state.path_cache.delete(oldest_key);
+  }
+}
+
+// renderer/canvas/draw.ts
+function draw_path_canvas(state, p, s) {
+  const path2d = get_or_create_path2d_canvas(state, p);
+  apply_style_canvas(state.ctx, s);
+  if (s.fill !== null) {
+    state.ctx.fill(path2d);
+  }
+  if (s.stroke !== null && s.stroke_width > 0) {
+    state.ctx.stroke(path2d);
+  }
+}
+function draw_rectangle_canvas(state, r, s) {
+  apply_style_canvas(state.ctx, s);
+  if (s.fill !== null) {
+    state.ctx.fillRect(r[0], r[1], r[2], r[3]);
+  }
+  if (s.stroke !== null && s.stroke_width > 0) {
+    state.ctx.strokeRect(r[0], r[1], r[2], r[3]);
+  }
+}
+function draw_circle_canvas(state, c, s) {
+  state.ctx.beginPath();
+  state.ctx.arc(c[0], c[1], c[2], 0, Math.PI * 2);
+  apply_style_canvas(state.ctx, s);
+  if (s.fill !== null) {
+    state.ctx.fill();
+  }
+  if (s.stroke !== null && s.stroke_width > 0) {
+    state.ctx.stroke();
+  }
+}
+function draw_line_canvas(state, a, b, s) {
+  state.ctx.beginPath();
+  state.ctx.moveTo(a[0], a[1]);
+  state.ctx.lineTo(b[0], b[1]);
+  apply_style_canvas(state.ctx, s);
+  state.ctx.stroke();
+}
+function draw_polyline_canvas(state, points, s) {
+  if (points.length < 2) {
+    return;
+  }
+  state.ctx.beginPath();
+  const first = points[0];
+  if (first !== undefined) {
+    state.ctx.moveTo(first[0], first[1]);
+  }
+  for (let i = 1;i < points.length; i = i + 1) {
+    const point = points[i];
+    if (point !== undefined) {
+      state.ctx.lineTo(point[0], point[1]);
+    }
+  }
+  apply_style_canvas(state.ctx, s);
+  state.ctx.stroke();
+}
+function draw_image_canvas(state, image, r, opacity, _version) {
+  const old_alpha = state.ctx.globalAlpha;
+  state.ctx.globalAlpha = opacity;
+  state.ctx.drawImage(image, r[0], r[1], r[2], r[3]);
+  state.ctx.globalAlpha = old_alpha;
+}
+function apply_style_canvas(ctx, s) {
+  ctx.globalAlpha = s.alpha;
+  if (s.fill !== null) {
+    ctx.fillStyle = to_rgba_string_color(s.fill);
+  }
+  if (s.stroke !== null) {
+    ctx.strokeStyle = to_rgba_string_color(s.stroke);
+  }
+  ctx.lineWidth = s.stroke_width;
+  ctx.lineCap = line_cap_to_string_canvas(s.line_cap);
+  ctx.lineJoin = line_join_to_string_canvas(s.line_join);
+  ctx.miterLimit = s.miter_limit;
+}
+function line_cap_to_string_canvas(cap) {
+  if (cap === line_cap_round) {
+    return "round";
+  } else if (cap === line_cap_square) {
+    return "square";
+  } else {
+    return "butt";
+  }
+}
+function line_join_to_string_canvas(join) {
+  if (join === line_join_round) {
+    return "round";
+  } else if (join === line_join_bevel) {
+    return "bevel";
+  } else {
+    return "miter";
+  }
+}
+
+// renderer/canvas/lifecycle.ts
+function begin_frame_canvas(state) {
+  state.ctx.setTransform(state.current_pixel_ratio, 0, 0, state.current_pixel_ratio, 0, 0);
+}
+function end_frame_canvas(_state) {}
+function set_transform_canvas(state, t) {
+  const pr = state.current_pixel_ratio;
+  state.ctx.setTransform(t[0] * pr, t[1] * pr, t[2] * pr, t[3] * pr, t[4] * pr, t[5] * pr);
+}
+function reset_transform_canvas(state) {
+  state.ctx.setTransform(state.current_pixel_ratio, 0, 0, state.current_pixel_ratio, 0, 0);
+}
+function save_canvas(state) {
+  state.ctx.save();
+}
+function restore_canvas(state) {
+  state.ctx.restore();
+}
+function clip_rectangle_canvas(state, r) {
+  state.ctx.save();
+  state.ctx.beginPath();
+  state.ctx.rect(r[0], r[1], r[2], r[3]);
+  state.ctx.clip();
+}
+function clear_canvas(state, c) {
+  state.ctx.save();
+  state.ctx.resetTransform();
+  state.ctx.fillStyle = to_rgba_string_color(c);
+  state.ctx.fillRect(0, 0, state.current_width * state.current_pixel_ratio, state.current_height * state.current_pixel_ratio);
+  state.ctx.restore();
+}
+function resize_canvas(state, canvas, width, height, pixel_ratio) {
+  state.current_width = width;
+  state.current_height = height;
+  state.current_pixel_ratio = pixel_ratio;
+  canvas.width = width * pixel_ratio;
+  canvas.height = height * pixel_ratio;
+  canvas.style.width = width + "px";
+  canvas.style.height = height + "px";
+  state.ctx.setTransform(pixel_ratio, 0, 0, pixel_ratio, 0, 0);
+}
+function dispose_canvas(state) {
+  state.path_cache.clear();
+}
+
+// renderer/canvas/index.ts
+function create_renderer_canvas(canvas, config) {
+  const ctx = canvas.getContext("2d");
+  if (ctx === null) {
+    return null;
+  }
+  const state = {
+    ctx,
+    path_cache: new Map,
+    cache_access_counter: 0,
+    cache_max_size: config.path_cache_size,
+    current_width: canvas.width,
+    current_height: canvas.height,
+    current_pixel_ratio: 1
+  };
+  return {
+    kind: renderer_kind_canvas,
+    get width() {
+      return state.current_width;
+    },
+    get height() {
+      return state.current_height;
+    },
+    get pixel_ratio() {
+      return state.current_pixel_ratio;
+    },
+    begin_frame: () => begin_frame_canvas(state),
+    end_frame: () => end_frame_canvas(state),
+    set_transform: (t) => set_transform_canvas(state, t),
+    reset_transform: () => reset_transform_canvas(state),
+    save: () => save_canvas(state),
+    restore: () => restore_canvas(state),
+    draw_path: (p, s) => draw_path_canvas(state, p, s),
+    draw_rectangle: (r, s) => draw_rectangle_canvas(state, r, s),
+    draw_circle: (c, s) => draw_circle_canvas(state, c, s),
+    draw_line: (a, b, s) => draw_line_canvas(state, a, b, s),
+    draw_polyline: (points, s) => draw_polyline_canvas(state, points, s),
+    draw_image: (image, r, opacity, version) => draw_image_canvas(state, image, r, opacity, version),
+    clip_rectangle: (r) => clip_rectangle_canvas(state, r),
+    clear: (c) => clear_canvas(state, c),
+    resize: (width, height, pixel_ratio) => resize_canvas(state, canvas, width, height, pixel_ratio),
+    dispose: () => dispose_canvas(state)
+  };
+}
+// renderer/renderer.ts
+var renderer_kind_canvas = 0;
+var renderer_kind_webgl = 1;
+function create_renderer_config() {
+  return {
+    prefer_webgl: false,
+    path_cache_size: 1024
+  };
+}
+function create_renderer(canvas, config) {
+  if (config.prefer_webgl) {
+    const webgl_renderer = create_renderer_webgl(canvas, config);
+    if (webgl_renderer !== null) {
+      return webgl_renderer;
+    }
+  }
+  return create_renderer_canvas(canvas, config);
+}
+
+// renderer/webgl/index.ts
+function create_renderer_webgl(canvas, config) {
+  const gl = canvas.getContext("webgl", { alpha: true, antialias: true });
+  if (gl === null) {
+    return null;
+  }
+  const color_program = create_color_program_webgl(gl);
+  const texture_program = create_texture_program_webgl(gl);
+  if (color_program === null || texture_program === null) {
+    if (color_program !== null) {
+      gl.deleteProgram(color_program.program);
+    }
+    if (texture_program !== null) {
+      gl.deleteProgram(texture_program.program);
+    }
+    return null;
+  }
+  const max_vertices = 65536;
+  const max_indices = max_vertices * 3;
+  const state = {
+    gl,
+    canvas,
+    program: color_program.program,
+    texture_program: texture_program.program,
+    program_locations: color_program.locations,
+    texture_locations: texture_program.locations,
+    position_buffer: gl.createBuffer(),
+    color_buffer: gl.createBuffer(),
+    texcoord_buffer: gl.createBuffer(),
+    index_buffer: gl.createBuffer(),
+    vertices: new Float32Array(max_vertices * 2),
+    colors: new Float32Array(max_vertices * 4),
+    indices: new Uint16Array(max_indices),
+    vertex_count: 0,
+    index_count: 0,
+    max_vertices,
+    max_indices,
+    current_transform: new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]),
+    transform_stack: [],
+    fill_cache: new Map,
+    stroke_cache: new Map,
+    texture_cache: new Map,
+    cache_max_size: config.path_cache_size,
+    width: canvas.width,
+    height: canvas.height,
+    pixel_ratio: 1,
+    scissor_enabled: false
+  };
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  return {
+    kind: renderer_kind_webgl,
+    get width() {
+      return state.width;
+    },
+    get height() {
+      return state.height;
+    },
+    get pixel_ratio() {
+      return state.pixel_ratio;
+    },
+    begin_frame: () => begin_frame_webgl(state),
+    end_frame: () => end_frame_webgl(state),
+    set_transform: (t) => set_transform_webgl(state, t),
+    reset_transform: () => reset_transform_webgl(state),
+    save: () => save_webgl(state),
+    restore: () => restore_webgl(state),
+    draw_path: (p, s) => draw_path_webgl(state, p, s),
+    draw_rectangle: (r, s) => draw_rectangle_webgl(state, r, s),
+    draw_circle: (c, s) => draw_circle_webgl(state, c, s),
+    draw_line: (a, b, s) => draw_line_webgl(state, a, b, s),
+    draw_polyline: (points, s) => draw_polyline_webgl(state, points, s),
+    draw_image: (image, r, opacity, version) => draw_image_webgl(state, image, r, opacity, version),
+    clip_rectangle: (r) => clip_rectangle_webgl(state, r),
+    clear: (c) => clear_webgl(state, c),
+    resize: (width, height, pixel_ratio) => resize_webgl(state, width, height, pixel_ratio),
+    dispose: () => dispose_webgl(state)
+  };
+}
+
+export { path_move, path_line, path_cubic, path_close, create_path, clone_path, move_to_path, line_to_path, cubic_to_path, close_path, bounds_of_path, is_empty_path, command_count_of_path, transform_path, hash_of_path, from_rectangle_path, from_circle_path, from_polyline_path, create_renderer_webgl, renderer_kind_canvas, renderer_kind_webgl, create_renderer_config, create_renderer, create_renderer_canvas };