ionic adjust canvas size based on orientation

3 min read 07-10-2024

ionic adjust canvas size based on orientation

Adapting Ionic Canvas Size to Device Orientation: A Step-by-Step Guide

Problem: Imagine you're building a drawing app using Ionic. The canvas where users sketch looks great in portrait mode, but in landscape mode, it gets squished or stretched awkwardly, ruining the user experience. This happens because the default canvas size doesn't automatically adjust to the changing screen dimensions when the device orientation changes.

Solution: We can dynamically resize the canvas based on the orientation of the device, providing a seamless and responsive user experience.

The Scenario

Let's assume you have a simple Ionic project with a canvas element:

<canvas id="myCanvas"></canvas>

And in your TypeScript file, you are setting the canvas size:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {

  ngOnInit() {
    const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
    const context = canvas.getContext('2d');
    // Set initial canvas dimensions (e.g., 300px x 200px)
    canvas.width = 300;
    canvas.height = 200;

    // ...rest of your canvas drawing logic
  }
}

The Issue: This approach sets the canvas size to a fixed value, which doesn't account for orientation changes.

Dynamic Canvas Resizing

Here's how you can dynamically adjust the canvas size in your Ionic app:

Listen for Orientation Changes: Use the window.addEventListener to detect changes in the orientation of the device:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage implements OnInit {

  ngOnInit() {
    const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
    const context = canvas.getContext('2d');
    // Set initial canvas dimensions
    this.setCanvasDimensions(canvas);

    // Listen for orientation changes
    window.addEventListener('resize', () => {
      this.setCanvasDimensions(canvas);
    });
  }

  // Function to set the canvas dimensions based on screen dimensions
  setCanvasDimensions(canvas: HTMLCanvasElement) {
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight;
  }
}

Adjust Canvas Dimensions: In your setCanvasDimensions function, use window.innerWidth and window.innerHeight to get the actual dimensions of the screen after orientation changes and adjust the canvas.width and canvas.height accordingly.

Key Considerations

Clear Canvas: Remember to clear the canvas before redrawing when the orientation changes to prevent overlapping content. Use context.clearRect(0, 0, canvas.width, canvas.height) to do so.
Aspect Ratio: For preserving the original aspect ratio of your content (especially important for images), adjust the canvas size while maintaining the aspect ratio. This might involve some calculations to ensure the image doesn't get distorted.

Example Code

Here's an example demonstrating how to adjust canvas size based on orientation with an aspect ratio of 16:9:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage implements OnInit {

  ngOnInit() {
    const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
    const context = canvas.getContext('2d');
    // Set initial canvas dimensions (using 16:9 aspect ratio)
    this.setCanvasDimensions(canvas);

    // Listen for orientation changes
    window.addEventListener('resize', () => {
      this.setCanvasDimensions(canvas);
    });
  }

  // Function to set canvas dimensions based on screen size & aspect ratio
  setCanvasDimensions(canvas: HTMLCanvasElement) {
    const aspectRatio = 16 / 9;
    const screenWidth = window.innerWidth;
    const screenHeight = window.innerHeight;

    if (screenWidth / screenHeight > aspectRatio) {
      // Landscape orientation
      canvas.width = screenWidth;
      canvas.height = screenWidth / aspectRatio;
    } else {
      // Portrait orientation
      canvas.width = screenHeight * aspectRatio;
      canvas.height = screenHeight;
    }
  }
}

Conclusion

By dynamically resizing the canvas based on device orientation, you can ensure a smooth and responsive user experience in your Ionic apps. This technique is essential for applications involving drawing, image manipulation, or any content that needs to adapt to screen changes.

Resources:

Remember to test your app thoroughly on different devices and screen sizes to ensure that the canvas resizing works as expected.