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

Unexpected outcomes arise when parsing headers from a file-based stream

Unexpected Issue with JavaScript Ajax (Using jQuery.post): The Promise State Turns to "Rejected"

Incorporate the variables specified in the parent PHP file into the PHP code being received through

Execute the controller function with the value as a parameter

Adding query parameters to the end of every link on a webpage

Accordion section appears on the webpage as it is loaded

Sending a JSON array in an AJAX request results in receiving null values in an MVC application

Encountering an issue with the autocomplete feature in the jQuery library where it is stating "this.source is not a function."

Creating a library in Angular2 with multiple routes: a step-by-step guide!

Prevent Click Event in JQuery

Troubleshooting issue: AngularJS NVD3 line chart directive does not refresh after data update (not updating in real time)

An unexpected error occurred: [$injector:modulerr] (unidentified)

Guide on invoking an API with a private IP on an EC2 instance

Creating a seamless thread using AngularJS

Jquery-ajax fails to accomplish its task

Ways to show a div when a dropdown option is selected

"Utilize Python's Selenium library to automate clicking the 'Get Data

Troubleshooting Vue.js rendering problems on Safari_BROWSER

Checking for offline status in a Cordova app using Angular

Modify the background color of <td> elements depending on the specific value