Image Demo Description

This page demonstrates the XImage component from @boardxus/canvasx-core. It shows how to add and display images on the canvas, set their source, and control their size and position.

XImage Documentation

Overview

The XImage widget allows you to add images to your CanvasX board. Images can be loaded from URLs, positioned, resized, and combined with other objects for rich visual layouts.

Key Properties

• src: string — The image source URL.
• width, height: number — The dimensions of the image.
• top, left: number — The position of the image on the canvas.
• id: string — Unique identifier for the image.

Usage Example

const image = new XImage('elementId', {
  top: 100,
  left: 100,
  width: 200,
  height: 200,
});
await image.setSrc('https://example.com/image.png');
canvas.add(image);

Tips & Best Practices

• Use high-resolution images for better clarity on high-DPI screens.
• Combine images with notes, shapes, and connectors for diagrams and presentations.
• Set unique IDs for each image to manage them programmatically.