Skip to content

Why image is not show  #515

@abhisunny2610

Description

@abhisunny2610

export function setupCanvas(graph, backgroundImageUrl) {
const canvas = new LGraphCanvas("#graph-canvas", graph);

// Load background image if provided
if (backgroundImageUrl) {
const img = new Image();
img.src = backgroundImageUrl;
console.log("Loading image from:", img.src);

img.onload = () => {
  console.log("Image loaded successfully:", img.src);

  // Manually draw the background image
  const ctx = canvas.canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, canvas.canvas.width, canvas.canvas.height);

  console.log("Background image drawn manually");
};

img.onerror = () => {
  console.error("Failed to load background image:", img.src);
};

}

// Zoom Controls
document.getElementById("zoom-in").onclick = () => {
if (canvas.ds.scale < 2) {
// Limit max zoom
canvas.ds.scale *= 1.2;
canvas.setDirty(true, true);
}
};

document.getElementById("zoom-out").onclick = () => {
if (canvas.ds.scale > 0.2) {
// Limit min zoom
canvas.ds.scale *= 0.8;
canvas.setDirty(true, true);
}
};

/**

  • Resizes the canvas to fit its container
    */
    function resizeCanvas() {
    const canvasElement = document.getElementById("graph-canvas");
    const container = document.getElementById("graph-container");
    canvasElement.width = container.offsetWidth;
    canvasElement.height = container.offsetHeight;
    canvas.setDirty(true, true);
    }

// Handle window resizing
window.addEventListener("resize", resizeCanvas);
resizeCanvas();

return canvas;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions