JavaScript - Konva.js - 背景を設定する

1.　概要

2.　背景を設定する

3.　参考サイト

1.　概要

　背景画像として使いたい、画像ファイルを背景として使う方法についてのメモです。

2.　背景を設定する

　「script」に下記を記述します。


const stage = new Konva.Stage({
	container: 'container',
	width: window.innerWidth,
	height: window.innerHeight,
});

const layer = new Konva.Layer();
stage.add(layer);

const imageObj = new Image();
imageObj.src = '/path/画像ファイル.png';

const background = new Konva.Image({
	x: 0,
	y: 0,
	image: imageObj,
	width: stage.width(),
	height: stage.height(),

	// 背景には イベントを割り当てない
	listening: false,
});
layer.add(background);


　この後ろに、通常の操作関係の処理を書いていきます。
　上記の場合、画像ファイルが、キャンバスと同じサイズになります。

3.　参考サイト

　本ページは、「ChatGPT」くんを参考にさせていただきました。