@al8b/image 0.1.0

package/dist/core/image.mjs

@@ -0,0 +1,993 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/blending.ts
+var BLENDING_MODES = {
+  normal: "source-over",
+  additive: "lighter"
+};
+var MODES = [
+  "source-over",
+  "source-in",
+  "source-out",
+  "source-atop",
+  "destination-over",
+  "destination-in",
+  "destination-out",
+  "destination-atop",
+  "lighter",
+  "copy",
+  "xor",
+  "multiply",
+  "screen",
+  "overlay",
+  "darken",
+  "lighten",
+  "color-dodge",
+  "color-burn",
+  "hard-light",
+  "soft-light",
+  "difference",
+  "exclusion",
+  "hue",
+  "saturation",
+  "color",
+  "luminosity"
+];
+for (const mode of MODES) {
+  BLENDING_MODES[mode] = mode;
+}
+
+// src/core/color.ts
+function setColor(context, color) {
+  if (color == null) {
+    return;
+  }
+  if (typeof color === "string") {
+    context.fillStyle = color;
+    context.strokeStyle = color;
+  }
+}
+__name(setColor, "setColor");
+function setLinearGradient(context, x1, y1, x2, y2, c1, c2) {
+  const grd = context.createLinearGradient(x1, y1, x2, y2);
+  grd.addColorStop(0, c1);
+  grd.addColorStop(1, c2);
+  context.fillStyle = grd;
+  context.strokeStyle = grd;
+}
+__name(setLinearGradient, "setLinearGradient");
+function setRadialGradient(context, x, y, radius, c1, c2) {
+  const grd = context.createRadialGradient(x, y, 0, x, y, radius);
+  grd.addColorStop(0, c1);
+  grd.addColorStop(1, c2);
+  context.fillStyle = grd;
+  context.strokeStyle = grd;
+}
+__name(setRadialGradient, "setRadialGradient");
+
+// src/core/context.ts
+function createDefaultContextState(centered) {
+  if (centered) {
+    return {
+      alpha: 1,
+      pixelated: 1,
+      line_width: 1,
+      translation_x: 0,
+      translation_y: 0,
+      rotation: 0,
+      scale_x: 1,
+      scale_y: -1,
+      image_transform: true,
+      anchor_x: 0,
+      anchor_y: 0,
+      object_rotation: 0,
+      object_scale_x: 1,
+      object_scale_y: -1,
+      font: "BitCell"
+    };
+  } else {
+    return {
+      alpha: 1,
+      pixelated: 1,
+      line_width: 1,
+      translation_x: 0,
+      translation_y: 0,
+      rotation: 0,
+      scale_x: 1,
+      scale_y: 1,
+      image_transform: false,
+      anchor_x: -1,
+      anchor_y: 1,
+      object_rotation: 0,
+      object_scale_x: 1,
+      object_scale_y: 1,
+      font: "BitCell"
+    };
+  }
+}
+__name(createDefaultContextState, "createDefaultContextState");
+function updateImageTransform(state) {
+  state.image_transform = state.translation_x !== 0 || state.translation_y !== 0 || state.scale_x !== 1 || state.scale_y !== 1 || state.rotation !== 0;
+}
+__name(updateImageTransform, "updateImageTransform");
+
+// src/core/drawing.ts
+function initDrawOp(context, state, x, y, object_transform = true) {
+  let res = false;
+  if (state.image_transform) {
+    context.save();
+    res = true;
+    context.translate(state.translation_x, state.translation_y);
+    context.scale(state.scale_x, state.scale_y);
+    context.rotate(state.rotation / 180 * Math.PI);
+    context.translate(x, y);
+  }
+  if (object_transform && (state.object_rotation !== 0 || state.object_scale_x !== 1 || state.object_scale_y !== 1)) {
+    if (!res) {
+      context.save();
+      res = true;
+      context.translate(x, y);
+    }
+    if (state.object_rotation !== 0) {
+      context.rotate(state.object_rotation / 180 * Math.PI);
+    }
+    if (state.object_scale_x !== 1 || state.object_scale_y !== 1) {
+      context.scale(state.object_scale_x, state.object_scale_y);
+    }
+  }
+  return res;
+}
+__name(initDrawOp, "initDrawOp");
+function closeDrawOp(context) {
+  context.restore();
+}
+__name(closeDrawOp, "closeDrawOp");
+function fillRect(context, state, x, y, w, h) {
+  context.globalAlpha = state.alpha;
+  if (initDrawOp(context, state, x, y)) {
+    context.fillRect(-w / 2 - state.anchor_x * w / 2, -h / 2 + state.anchor_y * h / 2, w, h);
+    closeDrawOp(context);
+  } else {
+    context.fillRect(x - w / 2 - state.anchor_x * w / 2, y - h / 2 + state.anchor_y * h / 2, w, h);
+  }
+}
+__name(fillRect, "fillRect");
+function fillRoundRect(context, state, x, y, w, h, round) {
+  context.globalAlpha = state.alpha;
+  if (initDrawOp(context, state, x, y)) {
+    context.fillRoundRect(-w / 2 - state.anchor_x * w / 2, -h / 2 + state.anchor_y * h / 2, w, h, round);
+    closeDrawOp(context);
+  } else {
+    context.fillRoundRect(x - w / 2 - state.anchor_x * w / 2, y - h / 2 + state.anchor_y * h / 2, w, h, round);
+  }
+}
+__name(fillRoundRect, "fillRoundRect");
+function fillRound(context, state, x, y, w, h) {
+  context.globalAlpha = state.alpha;
+  w = Math.abs(w);
+  h = Math.abs(h);
+  if (initDrawOp(context, state, x, y)) {
+    context.beginPath();
+    context.ellipse(-state.anchor_x * w / 2, 0 + state.anchor_y * h / 2, w / 2, h / 2, 0, 0, Math.PI * 2, false);
+    context.fill();
+    closeDrawOp(context);
+  } else {
+    context.beginPath();
+    context.ellipse(x - state.anchor_x * w / 2, y + state.anchor_y * h / 2, w / 2, h / 2, 0, 0, Math.PI * 2, false);
+    context.fill();
+  }
+}
+__name(fillRound, "fillRound");
+function drawRect(context, state, x, y, w, h) {
+  context.globalAlpha = state.alpha;
+  context.lineWidth = state.line_width;
+  if (initDrawOp(context, state, x, y)) {
+    context.strokeRect(-w / 2 - state.anchor_x * w / 2, -h / 2 + state.anchor_y * h / 2, w, h);
+    closeDrawOp(context);
+  } else {
+    context.strokeRect(x - w / 2 - state.anchor_x * w / 2, y - h / 2 + state.anchor_y * h / 2, w, h);
+  }
+}
+__name(drawRect, "drawRect");
+function drawRoundRect(context, state, x, y, w, h, round) {
+  context.globalAlpha = state.alpha;
+  context.lineWidth = state.line_width;
+  if (initDrawOp(context, state, x, y)) {
+    context.strokeRoundRect(-w / 2 - state.anchor_x * w / 2, -h / 2 + state.anchor_y * h / 2, w, h, round);
+    closeDrawOp(context);
+  } else {
+    context.strokeRoundRect(x - w / 2 - state.anchor_x * w / 2, y - h / 2 + state.anchor_y * h / 2, w, h, round);
+  }
+}
+__name(drawRoundRect, "drawRoundRect");
+function drawRound(context, state, x, y, w, h) {
+  context.globalAlpha = state.alpha;
+  context.lineWidth = state.line_width;
+  w = Math.abs(w);
+  h = Math.abs(h);
+  if (initDrawOp(context, state, x, y)) {
+    context.beginPath();
+    context.ellipse(0 - state.anchor_x * w / 2, 0 + state.anchor_y * h / 2, w / 2, h / 2, 0, 0, Math.PI * 2, false);
+    context.stroke();
+    closeDrawOp(context);
+  } else {
+    context.beginPath();
+    context.ellipse(x - state.anchor_x * w / 2, y + state.anchor_y * h / 2, w / 2, h / 2, 0, 0, Math.PI * 2, false);
+    context.stroke();
+  }
+}
+__name(drawRound, "drawRound");
+function drawLine(context, state, x1, y1, x2, y2) {
+  context.globalAlpha = state.alpha;
+  context.lineWidth = state.line_width;
+  const transform = initDrawOp(context, state, 0, 0, false);
+  context.beginPath();
+  context.moveTo(x1, y1);
+  context.lineTo(x2, y2);
+  context.stroke();
+  if (transform) {
+    closeDrawOp(context);
+  }
+}
+__name(drawLine, "drawLine");
+
+// src/core/font.ts
+var loadedFonts = /* @__PURE__ */ new Set();
+var loadingFonts = /* @__PURE__ */ new Map();
+function loadFont(font) {
+  if (!font) {
+    return;
+  }
+  if (loadedFonts.has(font)) {
+    return Promise.resolve();
+  }
+  if (loadingFonts.has(font)) {
+    return loadingFonts.get(font);
+  }
+  if (typeof document !== "undefined" && "fonts" in document) {
+    const promise = document.fonts.load(`12pt ${font}`).then(() => {
+      loadedFonts.add(font);
+      loadingFonts.delete(font);
+    }).catch(() => {
+      loadedFonts.add(font);
+      loadingFonts.delete(font);
+    });
+    loadingFonts.set(font, promise);
+    return promise;
+  }
+  loadedFonts.add(font);
+  return Promise.resolve();
+}
+__name(loadFont, "loadFont");
+function isFontReady(font) {
+  if (!font) {
+    return true;
+  }
+  if (loadedFonts.has(font)) {
+    return true;
+  }
+  if (typeof document !== "undefined" && "fonts" in document) {
+    return document.fonts.check(`12pt ${font}`);
+  }
+  return true;
+}
+__name(isFontReady, "isFontReady");
+
+// src/core/map-rendering.ts
+var resolveStringMap = /* @__PURE__ */ __name((name) => {
+  const playerRuntime = globalThis?.player?.runtime;
+  if (!playerRuntime) {
+    return null;
+  }
+  const directMaps = playerRuntime.maps;
+  if (directMaps && directMaps[name]) {
+    return directMaps[name];
+  }
+  const screenMaps = playerRuntime.screen?.runtime?.maps;
+  if (screenMaps && screenMaps[name]) {
+    return screenMaps[name];
+  }
+  return null;
+}, "resolveStringMap");
+function drawMap(context, state, map, x, y, w, h) {
+  const resolvedMap = typeof map === "string" ? resolveStringMap(map) : map ?? null;
+  if (!resolvedMap || !resolvedMap.ready || !resolvedMap.draw) {
+    return;
+  }
+  context.globalAlpha = state.alpha;
+  context.imageSmoothingEnabled = !state.pixelated;
+  if (initDrawOp(context, state, x, y)) {
+    resolvedMap.draw(context, -w / 2 - state.anchor_x * w / 2, -h / 2 + state.anchor_y * h / 2, w, h);
+    closeDrawOp(context);
+  } else {
+    resolvedMap.draw(context, x - w / 2 - state.anchor_x * w / 2, y - h / 2 + state.anchor_y * h / 2, w, h);
+  }
+}
+__name(drawMap, "drawMap");
+
+// src/core/pixel.ts
+var pixelDataCache = null;
+function setRGB(context, x, y, r, g, b) {
+  if (pixelDataCache == null) {
+    pixelDataCache = context.createImageData(1, 1);
+  }
+  if (typeof r === "object") {
+    pixelDataCache.data[0] = r.R;
+    pixelDataCache.data[1] = r.G;
+    pixelDataCache.data[2] = r.B;
+  } else {
+    pixelDataCache.data[0] = r;
+    pixelDataCache.data[1] = g || 0;
+    pixelDataCache.data[2] = b || 0;
+  }
+  pixelDataCache.data[3] = 255;
+  context.putImageData(pixelDataCache, x, y);
+}
+__name(setRGB, "setRGB");
+function setRGBA(context, x, y, r, g, b, a) {
+  if (pixelDataCache == null) {
+    pixelDataCache = context.createImageData(1, 1);
+  }
+  if (typeof r === "object") {
+    pixelDataCache.data[0] = r.R;
+    pixelDataCache.data[1] = r.G;
+    pixelDataCache.data[2] = r.B;
+    pixelDataCache.data[3] = r.A != null ? r.A : 255;
+  } else {
+    pixelDataCache.data[0] = r;
+    pixelDataCache.data[1] = g || 0;
+    pixelDataCache.data[2] = b || 0;
+    pixelDataCache.data[3] = a ?? 255;
+  }
+  context.putImageData(pixelDataCache, x, y);
+}
+__name(setRGBA, "setRGBA");
+function getRGB(context, x, y, result = {
+  R: 0,
+  G: 0,
+  B: 0
+}) {
+  const d = context.getImageData(x, y, 1, 1);
+  result.R = d.data[0];
+  result.G = d.data[1];
+  result.B = d.data[2];
+  return result;
+}
+__name(getRGB, "getRGB");
+function getRGBA(context, x, y, result = {
+  R: 0,
+  G: 0,
+  B: 0,
+  A: 255
+}) {
+  const d = context.getImageData(x, y, 1, 1);
+  result.R = d.data[0];
+  result.G = d.data[1];
+  result.B = d.data[2];
+  result.A = d.data[3];
+  return result;
+}
+__name(getRGBA, "getRGBA");
+
+// src/core/shapes.ts
+function drawPolyline(context, state, args) {
+  if (Array.isArray(args[0])) {
+    args = args[0];
+  }
+  context.globalAlpha = state.alpha;
+  context.lineWidth = state.line_width;
+  if (args.length < 4) {
+    return;
+  }
+  const len = Math.floor(args.length / 2);
+  const transform = initDrawOp(context, state, 0, 0, false);
+  context.beginPath();
+  context.moveTo(args[0], args[1]);
+  for (let i = 1; i <= len - 1; i++) {
+    context.lineTo(args[i * 2], args[i * 2 + 1]);
+  }
+  context.stroke();
+  if (transform) {
+    closeDrawOp(context);
+  }
+}
+__name(drawPolyline, "drawPolyline");
+function drawPolygon(context, state, args) {
+  if (Array.isArray(args[0])) {
+    args = args[0];
+  }
+  context.globalAlpha = state.alpha;
+  context.lineWidth = state.line_width;
+  if (args.length < 4) {
+    return;
+  }
+  const len = Math.floor(args.length / 2);
+  const transform = initDrawOp(context, state, 0, 0, false);
+  context.beginPath();
+  context.moveTo(args[0], args[1]);
+  for (let i = 1; i <= len - 1; i++) {
+    context.lineTo(args[i * 2], args[i * 2 + 1]);
+  }
+  context.closePath();
+  context.stroke();
+  if (transform) {
+    closeDrawOp(context);
+  }
+}
+__name(drawPolygon, "drawPolygon");
+function fillPolygon(context, state, args) {
+  if (Array.isArray(args[0])) {
+    args = args[0];
+  }
+  context.globalAlpha = state.alpha;
+  if (args.length < 4) {
+    return;
+  }
+  const len = Math.floor(args.length / 2);
+  const transform = initDrawOp(context, state, 0, 0, false);
+  context.beginPath();
+  context.moveTo(args[0], args[1]);
+  for (let i = 1; i <= len - 1; i++) {
+    context.lineTo(args[i * 2], args[i * 2 + 1]);
+  }
+  context.fill();
+  if (transform) {
+    closeDrawOp(context);
+  }
+}
+__name(fillPolygon, "fillPolygon");
+function drawQuadCurve(context, state, args) {
+  if (Array.isArray(args[0])) {
+    args = args[0];
+  }
+  context.globalAlpha = state.alpha;
+  context.lineWidth = state.line_width;
+  if (args.length < 4) {
+    return;
+  }
+  const transform = initDrawOp(context, state, 0, 0, false);
+  context.beginPath();
+  context.moveTo(args[0], args[1]);
+  let index = 2;
+  while (index <= args.length - 4) {
+    context.quadraticCurveTo(args[index], args[index + 1], args[index + 2], args[index + 3]);
+    index += 4;
+  }
+  context.stroke();
+  if (transform) {
+    closeDrawOp(context);
+  }
+}
+__name(drawQuadCurve, "drawQuadCurve");
+function drawBezierCurve(context, state, args) {
+  if (Array.isArray(args[0])) {
+    args = args[0];
+  }
+  context.globalAlpha = state.alpha;
+  context.lineWidth = state.line_width;
+  if (args.length < 4) {
+    return;
+  }
+  const transform = initDrawOp(context, state, 0, 0, false);
+  context.beginPath();
+  context.moveTo(args[0], args[1]);
+  let index = 2;
+  while (index <= args.length - 6) {
+    context.bezierCurveTo(args[index], args[index + 1], args[index + 2], args[index + 3], args[index + 4], args[index + 5]);
+    index += 6;
+  }
+  context.stroke();
+  if (transform) {
+    closeDrawOp(context);
+  }
+}
+__name(drawBezierCurve, "drawBezierCurve");
+function drawArc(context, state, x, y, radius, angle1, angle2, ccw) {
+  context.globalAlpha = state.alpha;
+  context.lineWidth = state.line_width;
+  if (initDrawOp(context, state, x, y)) {
+    context.beginPath();
+    context.arc(0, 0, radius, angle1 / 180 * Math.PI, angle2 / 180 * Math.PI, ccw);
+    context.stroke();
+    closeDrawOp(context);
+  } else {
+    context.beginPath();
+    context.arc(x, y, radius, angle1 / 180 * Math.PI, angle2 / 180 * Math.PI, ccw);
+    context.stroke();
+  }
+}
+__name(drawArc, "drawArc");
+function fillArc(context, state, x, y, radius, angle1, angle2, ccw) {
+  context.globalAlpha = state.alpha;
+  if (initDrawOp(context, state, x, y)) {
+    context.beginPath();
+    context.arc(0, 0, radius, angle1 / 180 * Math.PI, angle2 / 180 * Math.PI, ccw);
+    context.fill();
+    closeDrawOp(context);
+  } else {
+    context.beginPath();
+    context.arc(x, y, radius, angle1 / 180 * Math.PI, angle2 / 180 * Math.PI, ccw);
+    context.fill();
+  }
+}
+__name(fillArc, "fillArc");
+
+// src/core/sprite-rendering.ts
+function getSpriteFrame(sprite) {
+  if (typeof sprite === "object" && "canvas" in sprite && !("frames" in sprite)) {
+    return sprite.canvas || sprite.image || null;
+  }
+  if (typeof sprite === "object" && sprite.frames && sprite.frames.length > 0) {
+    if (!sprite.ready) {
+      return null;
+    }
+    if (sprite.frames.length > 1) {
+      if (!sprite.animation_start || sprite.animation_start === 0) {
+        sprite.animation_start = Date.now();
+      }
+      const dt = 1e3 / (sprite.fps || 5);
+      const frame = Math.floor((Date.now() - sprite.animation_start) / dt) % sprite.frames.length;
+      if (frame >= 0 && frame < sprite.frames.length) {
+        return sprite.frames[frame].canvas;
+      }
+      return sprite.frames[0].canvas;
+    }
+    return sprite.frames[0].canvas;
+  }
+  return null;
+}
+__name(getSpriteFrame, "getSpriteFrame");
+function drawSprite(context, state, sprite, x, y, w, h) {
+  const canvas = getSpriteFrame(sprite);
+  if (canvas == null) {
+    return;
+  }
+  if (w == null) {
+    w = canvas.width;
+  }
+  if (!h) {
+    h = w / canvas.width * canvas.height;
+  }
+  context.globalAlpha = state.alpha;
+  context.imageSmoothingEnabled = !state.pixelated;
+  if (initDrawOp(context, state, x, y)) {
+    context.drawImage(canvas, -w / 2 - state.anchor_x * w / 2, -h / 2 + state.anchor_y * h / 2, w, h);
+    closeDrawOp(context);
+  } else {
+    context.drawImage(canvas, x - w / 2 - state.anchor_x * w / 2, y - h / 2 + state.anchor_y * h / 2, w, h);
+  }
+}
+__name(drawSprite, "drawSprite");
+function drawSpritePart(context, state, sprite, sx, sy, sw, sh, x, y, w, h) {
+  const canvas = getSpriteFrame(sprite);
+  if (canvas == null) {
+    return;
+  }
+  if (w == null) {
+    w = canvas.width;
+  }
+  if (!h) {
+    h = w / sw * sh;
+  }
+  context.globalAlpha = state.alpha;
+  context.imageSmoothingEnabled = !state.pixelated;
+  if (initDrawOp(context, state, x, y)) {
+    context.drawImage(canvas, sx, sy, sw, sh, -w / 2 - state.anchor_x * w / 2, -h / 2 + state.anchor_y * h / 2, w, h);
+    closeDrawOp(context);
+  } else {
+    context.drawImage(canvas, sx, sy, sw, sh, x - w / 2 - state.anchor_x * w / 2, y - h / 2 + state.anchor_y * h / 2, w, h);
+  }
+}
+__name(drawSpritePart, "drawSpritePart");
+
+// src/core/text.ts
+function textWidth(context, state, text, size) {
+  context.font = `${size}pt ${state.font}`;
+  return context.measureText(text).width;
+}
+__name(textWidth, "textWidth");
+function drawText(context, state, text, x, y, size) {
+  context.globalAlpha = state.alpha;
+  context.font = `${size}pt ${state.font}`;
+  context.textAlign = "center";
+  context.textBaseline = "middle";
+  const w = context.measureText(text).width;
+  const h = size;
+  if (initDrawOp(context, state, x, y)) {
+    context.fillText(text, 0 - state.anchor_x * w / 2, 0 + state.anchor_y * h / 2);
+    closeDrawOp(context);
+  } else {
+    context.fillText(text, x - state.anchor_x * w / 2, y + state.anchor_y * h / 2);
+  }
+}
+__name(drawText, "drawText");
+function drawTextOutline(context, state, text, x, y, size) {
+  context.globalAlpha = state.alpha;
+  context.font = `${size}pt ${state.font}`;
+  context.lineWidth = state.line_width;
+  context.textAlign = "center";
+  context.textBaseline = "middle";
+  const w = context.measureText(text).width;
+  const h = size;
+  if (initDrawOp(context, state, x, y)) {
+    context.strokeText(text, 0 - state.anchor_x * w / 2, 0 + state.anchor_y * h / 2);
+    closeDrawOp(context);
+  } else {
+    context.strokeText(text, x - state.anchor_x * w / 2, y + state.anchor_y * h / 2);
+  }
+}
+__name(drawTextOutline, "drawTextOutline");
+
+// src/core/transform.ts
+function setTranslation(state, translation_x, translation_y) {
+  state.translation_x = translation_x;
+  state.translation_y = translation_y;
+  if (!isFinite(state.translation_x)) {
+    state.translation_x = 0;
+  }
+  if (!isFinite(state.translation_y)) {
+    state.translation_y = 0;
+  }
+  updateImageTransform(state);
+}
+__name(setTranslation, "setTranslation");
+function setScale(state, scale_x, scale_y) {
+  state.scale_x = scale_x;
+  state.scale_y = scale_y;
+  if (!isFinite(state.scale_x) || state.scale_x === 0) {
+    state.scale_x = 1;
+  }
+  if (!isFinite(state.scale_y) || state.scale_y === 0) {
+    state.scale_y = 1;
+  }
+  updateImageTransform(state);
+}
+__name(setScale, "setScale");
+function setRotation(state, rotation) {
+  state.rotation = rotation;
+  if (!isFinite(state.rotation)) {
+    state.rotation = 0;
+  }
+  updateImageTransform(state);
+}
+__name(setRotation, "setRotation");
+function setDrawAnchor(state, anchor_x, anchor_y) {
+  state.anchor_x = anchor_x;
+  state.anchor_y = anchor_y;
+  if (typeof state.anchor_x !== "number") {
+    state.anchor_x = 0;
+  }
+  if (typeof state.anchor_y !== "number") {
+    state.anchor_y = 0;
+  }
+}
+__name(setDrawAnchor, "setDrawAnchor");
+function setDrawRotation(state, object_rotation) {
+  state.object_rotation = object_rotation;
+}
+__name(setDrawRotation, "setDrawRotation");
+function setDrawScale(state, object_scale_x, object_scale_y) {
+  state.object_scale_x = object_scale_x;
+  state.object_scale_y = object_scale_y;
+}
+__name(setDrawScale, "setDrawScale");
+
+// src/core/image.ts
+function splitColorArg(args) {
+  if (args.length > 0 && args.length % 2 === 1 && typeof args[args.length - 1] === "string") {
+    return {
+      points: args.slice(0, -1),
+      color: args[args.length - 1]
+    };
+  }
+  return {
+    points: args,
+    color: void 0
+  };
+}
+__name(splitColorArg, "splitColorArg");
+var Image = class {
+  static {
+    __name(this, "Image");
+  }
+  _canvas;
+  _context = null;
+  _image = null;
+  _state;
+  _centered;
+  width;
+  height;
+  constructor(widthOrImage, height, centered = false) {
+    this._centered = centered;
+    if (typeof widthOrImage === "object" && "naturalWidth" in widthOrImage) {
+      this._image = widthOrImage;
+      this.width = this._image.width;
+      this.height = this._image.height;
+    } else if (typeof widthOrImage === "object" && "getContext" in widthOrImage) {
+      this._canvas = widthOrImage;
+      this.width = this._canvas.width;
+      this.height = this._canvas.height;
+    } else {
+      this._canvas = document.createElement("canvas");
+      this.width = Math.round(widthOrImage);
+      this.height = Math.round(height || widthOrImage);
+      this._canvas.width = this.width;
+      this._canvas.height = this.height;
+    }
+  }
+  /**
+  * Initialize or get the canvas context
+  * Matches msImage initContext behavior exactly
+  */
+  initContext() {
+    if (this._context) {
+      return this._context;
+    }
+    if (!this._canvas && this._image) {
+      this._canvas = document.createElement("canvas");
+      this._canvas.width = this._image.width;
+      this._canvas.height = this._image.height;
+      this._context = this._canvas.getContext("2d");
+      this._context.drawImage(this._image, 0, 0);
+      this._image = null;
+    }
+    this._context = this._canvas.getContext("2d");
+    if (this._context) {
+      this._context.lineCap = "round";
+    }
+    if (!this._state) {
+      this._state = createDefaultContextState(this._centered);
+      if (this._centered) {
+        this._state.translation_x = this.width / 2;
+        this._state.translation_y = this.height / 2;
+      }
+    }
+    return this._context;
+  }
+  /**
+  * Get the canvas element
+  */
+  get canvas() {
+    this.initContext();
+    return this._canvas;
+  }
+  /**
+  * Get the image element (if still available)
+  */
+  get image() {
+    return this._image;
+  }
+  /**
+  * Get the rendering context
+  */
+  get context() {
+    return this._context;
+  }
+  // ===== PIXEL OPERATIONS =====
+  setRGB(x, y, r, g, b) {
+    this.initContext();
+    setRGB(this._context, x, y, r, g, b);
+  }
+  setRGBA(x, y, r, g, b, a) {
+    this.initContext();
+    setRGBA(this._context, x, y, r, g, b, a);
+  }
+  getRGB(x, y, result) {
+    this.initContext();
+    return getRGB(this._context, x, y, result);
+  }
+  getRGBA(x, y, result) {
+    this.initContext();
+    return getRGBA(this._context, x, y, result);
+  }
+  // ===== CANVAS OPERATIONS =====
+  clear(color) {
+    this.initContext();
+    const c = this._context.fillStyle;
+    const s = this._context.strokeStyle;
+    const blending_save = this._context.globalCompositeOperation;
+    this._context.globalAlpha = 1;
+    this._context.globalCompositeOperation = "source-over";
+    if (color != null) {
+      this.setColor(color);
+    } else {
+      this._context.fillStyle = "#000";
+    }
+    this._context.fillRect(0, 0, this.width, this.height);
+    this._context.fillStyle = c;
+    this._context.strokeStyle = s;
+    this._context.globalCompositeOperation = blending_save;
+  }
+  // ===== COLOR OPERATIONS =====
+  setColor(color) {
+    this.initContext();
+    setColor(this._context, color);
+  }
+  setAlpha(alpha) {
+    this.initContext();
+    this._state.alpha = alpha;
+  }
+  setPixelated(pixelated) {
+    this.initContext();
+    this._state.pixelated = pixelated;
+  }
+  setBlending(blending) {
+    this.initContext();
+    const mode = BLENDING_MODES[blending || "normal"] || "source-over";
+    this._context.globalCompositeOperation = mode;
+  }
+  setLineWidth(line_width) {
+    this.initContext();
+    this._state.line_width = line_width;
+  }
+  setLineDash(dash) {
+    this.initContext();
+    if (!Array.isArray(dash)) {
+      this._context.setLineDash([]);
+    } else {
+      this._context.setLineDash(dash);
+    }
+  }
+  setLinearGradient(x1, y1, x2, y2, c1, c2) {
+    this.initContext();
+    setLinearGradient(this._context, x1, y1, x2, y2, c1, c2);
+  }
+  setRadialGradient(x, y, radius, c1, c2) {
+    this.initContext();
+    setRadialGradient(this._context, x, y, radius, c1, c2);
+  }
+  // ===== FONT OPERATIONS =====
+  setFont(font) {
+    this.initContext();
+    this._state.font = font || "Verdana";
+    this.loadFont(this._state.font);
+  }
+  loadFont(font) {
+    return loadFont(font);
+  }
+  isFontReady(font) {
+    return isFontReady(font || this._state?.font || "Verdana");
+  }
+  // ===== TRANSFORM OPERATIONS =====
+  setTranslation(translation_x, translation_y) {
+    this.initContext();
+    setTranslation(this._state, translation_x, translation_y);
+  }
+  setScale(scale_x, scale_y) {
+    this.initContext();
+    setScale(this._state, scale_x, scale_y);
+  }
+  setRotation(rotation) {
+    this.initContext();
+    setRotation(this._state, rotation);
+  }
+  setDrawAnchor(anchor_x, anchor_y) {
+    this.initContext();
+    setDrawAnchor(this._state, anchor_x, anchor_y);
+  }
+  setDrawRotation(object_rotation) {
+    this.initContext();
+    setDrawRotation(this._state, object_rotation);
+  }
+  setDrawScale(object_scale_x, object_scale_y = object_scale_x) {
+    this.initContext();
+    setDrawScale(this._state, object_scale_x, object_scale_y);
+  }
+  // ===== DRAWING OPERATIONS =====
+  fillRect(x, y, w, h, color) {
+    this.initContext();
+    this.setColor(color);
+    fillRect(this._context, this._state, x, y, w, h);
+  }
+  fillRoundRect(x, y, w, h, round = 10, color) {
+    this.initContext();
+    this.setColor(color);
+    fillRoundRect(this._context, this._state, x, y, w, h, round);
+  }
+  fillRound(x, y, w, h, color) {
+    this.initContext();
+    this.setColor(color);
+    fillRound(this._context, this._state, x, y, w, h);
+  }
+  drawRect(x, y, w, h, color) {
+    this.initContext();
+    this.setColor(color);
+    drawRect(this._context, this._state, x, y, w, h);
+  }
+  drawRoundRect(x, y, w, h, round = 10, color) {
+    this.initContext();
+    this.setColor(color);
+    drawRoundRect(this._context, this._state, x, y, w, h, round);
+  }
+  drawRound(x, y, w, h, color) {
+    this.initContext();
+    this.setColor(color);
+    drawRound(this._context, this._state, x, y, w, h);
+  }
+  drawLine(x1, y1, x2, y2, color) {
+    this.initContext();
+    this.setColor(color);
+    drawLine(this._context, this._state, x1, y1, x2, y2);
+  }
+  // ===== SHAPE OPERATIONS =====
+  drawPolyline(...args) {
+    this.initContext();
+    const { points, color } = splitColorArg(args);
+    this.setColor(color);
+    drawPolyline(this._context, this._state, points);
+  }
+  drawPolygon(...args) {
+    this.initContext();
+    const { points, color } = splitColorArg(args);
+    this.setColor(color);
+    drawPolygon(this._context, this._state, points);
+  }
+  fillPolygon(...args) {
+    this.initContext();
+    const { points, color } = splitColorArg(args);
+    this.setColor(color);
+    fillPolygon(this._context, this._state, points);
+  }
+  drawQuadCurve(...args) {
+    this.initContext();
+    const { points, color } = splitColorArg(args);
+    this.setColor(color);
+    drawQuadCurve(this._context, this._state, points);
+  }
+  drawBezierCurve(...args) {
+    this.initContext();
+    const { points, color } = splitColorArg(args);
+    this.setColor(color);
+    drawBezierCurve(this._context, this._state, points);
+  }
+  drawArc(x, y, radius, angle1, angle2, ccw, color) {
+    this.initContext();
+    this.setColor(color);
+    drawArc(this._context, this._state, x, y, radius, angle1, angle2, ccw);
+  }
+  fillArc(x, y, radius, angle1, angle2, ccw, color) {
+    this.initContext();
+    this.setColor(color);
+    fillArc(this._context, this._state, x, y, radius, angle1, angle2, ccw);
+  }
+  // ===== TEXT OPERATIONS =====
+  textWidth(text, size) {
+    this.initContext();
+    return textWidth(this._context, this._state, text, size);
+  }
+  drawText(text, x, y, size, color) {
+    this.initContext();
+    this.setColor(color);
+    drawText(this._context, this._state, text, x, y, size);
+  }
+  drawTextOutline(text, x, y, size, color) {
+    this.initContext();
+    this.setColor(color);
+    drawTextOutline(this._context, this._state, text, x, y, size);
+  }
+  // ===== SPRITE RENDERING =====
+  drawSprite(sprite, x, y, w, h) {
+    this.initContext();
+    drawSprite(this._context, this._state, sprite, x, y, w, h);
+  }
+  drawImage(sprite, x, y, w, h) {
+    this.drawSprite(sprite, x, y, w, h);
+  }
+  drawSpritePart(sprite, sx, sy, sw, sh, x, y, w, h) {
+    this.initContext();
+    drawSpritePart(this._context, this._state, sprite, sx, sy, sw, sh, x, y, w, h);
+  }
+  drawImagePart(sprite, sx, sy, sw, sh, x, y, w, h) {
+    this.drawSpritePart(sprite, sx, sy, sw, sh, x, y, w, h);
+  }
+  // ===== MAP RENDERING =====
+  drawMap(map, x, y, w, h) {
+    this.initContext();
+    drawMap(this._context, this._state, map, x, y, w, h);
+  }
+};
+export {
+  Image
+};
+//# sourceMappingURL=image.mjs.map