<html>
<body style="margin:0;">
	
<iframe id="myFrame" style="width:100%;height:100vh;border:0;" src="../" allow="camera"></iframe>

<script>
	window.addEventListener('load', function (e) {
		draw_various();
	}, false);
	
	async function draw_various() {
		var Layers = document.getElementById('myFrame').contentWindow.Layers;
		
		//add layer
		var canvas = document.createElement('canvas');
		canvas.width = 50;
		canvas.height = 50;
		var ctx = canvas.getContext("2d");	
		cross_X(ctx, 25, 25);
		var params = {
			type: 'image',
			data: canvas.toDataURL("image/png"),
			x: 50,
			y: 50,
			width: canvas.width,
			height: canvas.height,
		};
		await Layers.insert(params);
		
		//add new layer
		var canvas = document.createElement('canvas');
		canvas.width = 400;
		canvas.height = 400;
		var ctx = canvas.getContext("2d");	
		cross_X(ctx, 200, 200, null, '#00cc00');
		var params = {
			type: 'image',
			data: canvas.toDataURL("image/png"),
			width: canvas.width,
			height: canvas.height,
		};
		await Layers.insert(params);

		//update last layer
		var canvas = Layers.convert_layer_to_canvas(null, true); //no trim
		var ctx = canvas.getContext("2d");
		cross_X(ctx, 300, 300, null, '#00cc00');
		Layers.update_layer_image(canvas);
		//also update layer
		var link = Layers.get_layer();
		link.x = parseInt(canvas.dataset.x);
		link.y = parseInt(canvas.dataset.y);
		link.width = canvas.width;
		link.height = canvas.height;
	}
	
	function cross_X(ctx, x, y, size = 20, col = '#ff0000') {
		if(size == null)
			size = 20;
		x = parseFloat(x);
		y = parseFloat(y);
		size = parseInt(size);
		var lw = parseInt(5);
		ctx.beginPath();
		ctx.moveTo(x - size, y - size);
		ctx.lineTo(x + size, y + size);
		ctx.lineWidth = lw;
		ctx.strokeStyle = col;
		ctx.stroke();
		ctx.moveTo(x + size, y - size);
		ctx.lineTo(x - size, y + size);
		ctx.lineWidth = lw;
		ctx.strokeStyle = col;
		ctx.stroke();
	}
</script>