Resizing canvas based on device (new)

[mgravano@gmail.com]

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!

[kglad]

i'm not sure why a touch device should trigger an orientation change.  https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/

[JoãoCésar]

Hi.

Have you tried createjs.Touch.isSupported();?

Please let us know.

Regards,

JC

[mgravano@gmail.com]

Thanks for the answers!
I already solved it by removing the height and width specifications in the html and js files that Animate puts by default, then the width and height are given directly by the code.