Maintaining aspect ratio of canvas while ensuring responsiveness

Question

Maintaining aspect ratio of canvas while ensuring responsiveness

Currently, I am working on a drawing app and have come across an issue that has been challenging for me to resolve. The dilemma lies in resizing the canvas of sketches from the original resolution of 1280 x 720 to the maximum size possible upon opening the page. This resizing should maintain the 1280 x 720 aspect ratio, while also accounting for a toolbar located at the top of the page.

The goal is to center the canvas on the screen, with black stripes filling the remaining space based on the dimensions of the browser window. If the window's aspect ratio is less than that of the sketch, horizontal black stripes will be displayed (see fig 1). Conversely, if the aspect ratio is greater, vertical black stripes will be shown (refer to fig 2).

To tackle this challenge, I experimented with JavaScript by calculating the offsetWidth and offsetHeight of a div containing a programmatically generated invisible image matching the original sketch dimensions. However, relying solely on these properties proved to be unreliable as they were not consistently ready when the page loaded, necessitating the use of timers or mutation observers.

I have dedicated significant time to finding a robust solution to this problem, but each approach I discovered seemed either too hacky or prone to errors. Any assistance or suggestions would be greatly appreciated as I work within the Angular + Ionic 4 framework.

javascript css angular canvas responsive-design

Answer 1

Answer №1

If my interpretation is correct, you are looking to dynamically adjust the size of your canvas based on the window's dimensions while maintaining a 1280 x 720 (1:0.5625) aspect ratio.

Here, I will present a solution that listens for window resizing even after it has loaded, requiring you to redraw all content on the canvas accordingly.

HTML

<body>
  <canvas id="canvas"></canvas>
</body>

CSS

body {
  background-color: black;
}

JavaScript:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

startListening();

function startListening() {
  // Resize the canvas each time the window is adjusted
  window.addEventListener('resize', resizeCanvas, false);
  // Manually trigger the resizeCanvas() function when the page loads to set initial dimensions
  resizeCanvas();
}

function resizeCanvas() {
  // Adjust canvas height according to window width while maintaining 1:0.5625 aspect ratio
  if(canvas.height < window.innerHeight){
    canvas.width = window.innerWidth;
    canvas.height = canvas.width * 0.5625;
  }
  
  // When canvas height reaches maximum, keep it locked and maintain 0.5625 height ratio
  if(canvas.height >= window.innerHeight){
    canvas.height = canvas.width * 0.5625;
  }
  
  // If narrowing the width, readjust both width and height accordingly
  if(canvas.width > window.innerWidth){
    canvas.width = window.innerWidth;
    canvas.height = canvas.width * 0.5625;
  }
  // Redraw the canvas with updated dimensions
  redraw();
}

function redraw() {
  ctx.fillStyle = "#FF0000";
  // Draw the canvas in center of screen using dimensions from resizeCanvas()
  ctx.fillRect((window.innerWidth - canvas.width) / 2, (window.innerHeight - canvas.height) / 2, canvas.width, canvas.height);
}

Answer 2

If my interpretation is correct, you are looking to dynamically adjust the size of your canvas based on the window's dimensions while maintaining a 1280 x 720 (1:0.5625) aspect ratio.

Here, I will present a solution that listens for window resizing even after it has loaded, requiring you to redraw all content on the canvas accordingly.

HTML

<body>
  <canvas id="canvas"></canvas>
</body>

CSS

body {
  background-color: black;
}

JavaScript:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

startListening();

function startListening() {
  // Resize the canvas each time the window is adjusted
  window.addEventListener('resize', resizeCanvas, false);
  // Manually trigger the resizeCanvas() function when the page loads to set initial dimensions
  resizeCanvas();
}

function resizeCanvas() {
  // Adjust canvas height according to window width while maintaining 1:0.5625 aspect ratio
  if(canvas.height < window.innerHeight){
    canvas.width = window.innerWidth;
    canvas.height = canvas.width * 0.5625;
  }
  
  // When canvas height reaches maximum, keep it locked and maintain 0.5625 height ratio
  if(canvas.height >= window.innerHeight){
    canvas.height = canvas.width * 0.5625;
  }
  
  // If narrowing the width, readjust both width and height accordingly
  if(canvas.width > window.innerWidth){
    canvas.width = window.innerWidth;
    canvas.height = canvas.width * 0.5625;
  }
  // Redraw the canvas with updated dimensions
  redraw();
}

function redraw() {
  ctx.fillStyle = "#FF0000";
  // Draw the canvas in center of screen using dimensions from resizeCanvas()
  ctx.fillRect((window.innerWidth - canvas.width) / 2, (window.innerHeight - canvas.height) / 2, canvas.width, canvas.height);
}

Maintaining aspect ratio of canvas while ensuring responsiveness

Answer №1

HTML

CSS

JavaScript:

Similar questions

Checkbox fails to trigger onChange when the checked value is controlled by state management

Trouble with JavaScript confirm's OK button functionality in Internet Explorer 11

Do I have to include the sizes attribute when using w-descriptors in srcset?

How can you transform a nested array into a flat JavaScript map?

Tips on obtaining a Firebase ID

Troubleshooting Electron Angular Application Connectivity Issues with API

I'm receiving the error message "Fatal error: Call to a member function query() on a non-object," what could be causing this issue?

Executing a mousedown event in Ajax while simultaneously running another JavaScript function using JQuery

Guide on how to initialize a variable in Express.js within a conditional statement in Node.js

Mouse hovering over the JS slider activates the sliding functionality, while removing the cursor

How to nullify the valueChanges pipe in Angular RxJS until the observable is resolved

The AnimationRendererFactory ahead-of-time (AOT) compilation is encountering an issue where it is unable to access the property 'create

Issue encountered while attempting to download npm for older versions

Positioning two divs side by side, with two more below in the following row

Hide the div in PHP if the active variable is null

I am currently working with an input element that is set to hidden. I am trying to change its type to text using JavaScript, but I can't seem to figure out how to do it or if it is even possible

How to dynamically set a computed background image in Vue 2

Changing a callback function into a promise in Node.js for OpenTok integration

Tips for ensuring long text wraps to the next line when it exceeds the width of the browser window

Unexpected JSON token error occurs in jQuery when valid input is provided