Angular Konva Images Tutorial

To display images with Konva in Angular, use ko-image and assign a loaded HTMLImageElement to the image property.

For Angular 21 apps, signals are the simplest way to update image config from async callbacks such as Image.onload.

Instructions: The demo loads an external image and renders it after the browser finishes loading it.

For more details, see the Image API Reference.

Images Example

import { Component, OnInit, signal } from '@angular/core';
import { StageConfig } from 'konva/lib/Stage';
import { ImageConfig } from 'konva/lib/shapes/Image';

import {
  CoreShapeComponent,
  StageComponent,
} from 'ng2-konva';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <ko-stage [config]="configStage">
      <ko-layer>
        <ko-image [config]="configImage()"></ko-image>
      </ko-layer>
    </ko-stage>
  `,
  imports: [StageComponent, CoreShapeComponent],
})
export default class App implements OnInit {
  public configStage: StageConfig = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  public configImage = signal<ImageConfig>({
    x: 50,
    y: 50,
    image: null,
    width: 100,
    height: 100
  });

  ngOnInit() {
    const imageObj = new Image();
    imageObj.onload = () => {
      this.configImage.update((config) => ({
        ...config,
        image: imageObj
      }));
    };
    imageObj.src = 'https://konvajs.org/assets/yoda.jpg';
  }
}

Open Sandbox