Graphic

The Graphic class is a wrapper for handling image loading and rendering on an HTML5 canvas. It provides a simple interface to load an image and draw it at specified coordinates on the canvas.

Constructor

new Graphic(path, width, height, context);

Creates a new Graphic instance.

• Parameters:

  • path (string): The file path or URL of the image to be loaded.
  • width (number): The width of the image in pixels.
  • height (number): The height of the image in pixels.
  • context (CanvasRenderingContext2D): The canvas rendering context where the image will be drawn.

• Returns: A new Graphic instance.

• Example:

  const graphic = new Graphic('path/to/image.png', 32, 32, context);

Properties

• image (HTMLImageElement): The underlying image object that is loaded from the specified path.
• width (number): The width of the image.
• height (number): The height of the image.
• context (CanvasRenderingContext2D): The canvas rendering context used to draw the image.

Methods

render(x, y, [width], [height])

Renders the image onto the canvas at the specified coordinates.

• Parameters:

  • x (number): The x-coordinate where the image should be drawn on the canvas.
  • y (number): The y-coordinate where the image should be drawn on the canvas.
  • width (number, optional): The width of the rendered image. Defaults to the original image width.
  • height (number, optional): The height of the rendered image. Defaults to the original image height.

• Returns: void

• Example:

  graphic.render(50, 50); // Draws the image at (50, 50) with original dimensions
  graphic.render(100, 100, 64, 64); // Draws the image at (100, 100) with custom dimensions