Search the Community

Hello again, back with another issue I can't find a solution to. Does anybody know how to resize/scale canvas2d? More specifically a (new BABYLON.ScreenSpaceCanvas2D). I've looked through the documentation but can't find any functions that would do this. On window resize I'm simply calling engine.resize(). As an alternative, I tried manually changing the size by calling... canvasGUI.size = new BABYLON.Size(innerWidth/6.04, innerHeight/10.08); canvasGUI.children[0].fontName = 10 + "pt Arial"; But it seems to cut canvas2d instead of re-scaling it. Any simple solutions to this problem? Thank you! **Update, I've managed to find a solution that works. I'm still working out a proper solution for the math, but so far this works in creating a window of width,height 300,100 and a font of 22 for a 1920x1080 +- a few decimal points on the divisions of width and height. window.addEventListener('resize', function(){ engine.resize(); canvasGUI.dispose(); canvasGUI = createGUI(scene, window.innerWidth, window.innerHeight); //1920/6.04 = 300 //1080/10.08 = 100 }); var createGUI = function (scene, width, height, uWidth, uHeight, fontSize, message) { var fontScale = 3000/fontSize; var wn = 1920/uWidth; var hn = 1080/uHeight; var setFontSize = (width/fontScale + height/fontScale); var canvas = new BABYLON.ScreenSpaceCanvas2D(scene, { id: "ScreenCanvas", size: new BABYLON.Size(width/wn, height/hn), backgroundFill: "#404040FF", backgroundRoundRadius: 5, children: [ new BABYLON.Text2D(message, { id: "text", marginAlignment: "h:center, v:center", fontName: setFontSize + "pt Garamond", }) ] }); return canvas; };