• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Resizing canvas based on device

Community Beginner ,
Oct 21, 2024 Oct 21, 2024

Copy link to clipboard

Copied

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's a touch device if (window.innerWidth < window.innerHeight) { // Portrait mode: adjust to 530x960 stageWidth = 530; stageHeight = 960; } else { // Landscape mode: set to 960x630 stageWidth = 960; stageHeight = 630; } } else { // Desktop: keep 960x630 stageWidth = 960; stageHeight = 630; } // Resize canvas manually var canvas = document.getElementById("canvas"); // Make sure the canvas ID is "canvas" canvas.style.width = stageWidth + "px"; canvas.style.height = stageHeight + "px"; // Resize stage content stage.scaleX = stageWidth / lib.properties.width; stage.scaleY = stageHeight / lib.properties.height; // Make sure stage updates stage.tickOnUpdate = false; // Stop auto-update stage.update(); // Update the stage stage.tickOnUpdate = true; // Re-enable auto-update } // Listen for window orientation or size change window.addEventListener('resize', resizeCanvas); window.addEventListener('orientationchange', resizeCanvas); resizeCanvas(); // Call when page loads Can anyone help me?

Views

45

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation