JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://pixijs.download/v4.8.2/pixi.min.js"></script>
<canvas id="renderCanvas" touch-action="none" width='1920px' height='960px'></canvas>

JavaScript

var canvas = document.getElementById("renderCanvas");
var context = canvas.getContext('2d');

addImage("https://i.ibb.co/8g2Q11F/0.jpg", 0, 0);
addImage("https://i.ibb.co/pJp0br1/1.jpg", 640, 0);
addImage("https://i.ibb.co/xFkxWgQ/2.jpg", 1280, 0);
addImage("https://i.ibb.co/MStPC6D/3.jpg", 0, 320);
addImage("https://i.ibb.co/QXgsvZB/4.jpg", 640, 320);
addImage("https://i.ibb.co/wyzvLFY/5.jpg", 1280, 320);
addImage("https://i.ibb.co/PM0gSSP/6.jpg", 0, 640);
addImage("https://i.ibb.co/ZmK7Yzn/7.jpg", 640, 640);
addImage("https://i.ibb.co/Gp4Zy30/8.jpg", 1280, 640);
//console.log(canvas.getContext('2d'));
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 12, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

var dome = new BABYLON.PhotoDome(
  "testdome",
  сanvas.toDataURL('image/jpeg'),
  {
    resolution: 32,
    size: 100,
    useDirectMapping: true
  },
  scene
);

engine.runRenderLoop(function() {
  scene.render();    	
  engine.wipeCaches(true);
});

function addImage(link, x, y) {
	var image = new Image();
  image.src = link;
  image.onload = () => {
  	context.drawImage(image, x, y);
  }
}