Resizing canvas based on device (new)

Sorry, I'm new to this community and I posted my previous question wrong.

I have an online coloring game site. I want that if the user opens the game on a non-touch screen device, the canvas will be 960px x 630px, and if the user plays on a touch screen device, the canvas will be 630px x 960px. I have this code, but it doesn't work:

var isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;

function resizeCanvas() { var stageWidth, stageHeight;

 if (isTouchDevice) { // If it is a touch device if (window.innerWidth < window.innerHeight) { // Portrait mode: set to 530x960 stageWidth = 530;
 stageHeight = 960;
 } else { // Landscape mode: set to 960x630 stageWidth = 960;
 stageHeight = 630;
 } } else { // Desktop device: keep 960x630 stageWidth = 960;
 stageHeight = 630;
 }
alert(stageWidth);
// Change the canvas size manually
var canvas = document.getElementById("canvas"); // Make sure the canvas ID is "canvas"
canvas.style.width = stageWidth + "px" ;
canvas.style.height = stageHeight + "px";

// Adjust the size of the stage content
// stage.scaleX = stageWidth / lib.properties.width;
// stage.scaleY = stageHeight / lib.properties.height; // Ensure stage update
stage.tickOnUpdate = false; // Stop auto-update
stage.update(); // Update stage
stage.tickOnUpdate = true; // Re-enable auto-update
}

// Listen for orientation change or window size
window.addEventListener('resize', resizeCanvas);
window.addEventListener('orientationchange', resizeCanvas);
resizeCanvas(); // Call when page loads

Can anyone help me?
Thanks!