Elastic canvas to always match the full size of the container or screen

Question

Elastic canvas to always match the full size of the container or screen

I am facing an issue with my responsive canvas that should resize to fit the screen window within a div. The canvas is intended to be 1100x1100 but needs to scale based on the screen size while maintaining a square aspect ratio.

The problem arises when the canvas expands below the screen rather than filling the div size, possibly due to the presence of a top menu navbar and its dynamic behavior. In some cases, the navmenu can collapse or be hidden, making it challenging to adjust the canvas position based on pixels.

How can I resolve this issue to make sure the canvas fits the screen without any scrolling required? Should I look for a CSS solution or turn to Javascript for assistance?

If you try setting the CSS width/height to 100%, you will notice that the square aspect is lost, and the canvas still extends beyond the height viewport. My goal is for the canvas to always remain a square shape. (Please click Full page to see the demo)

// Code snippets here...

// Additional CSS code snippets...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light mb-1" style="background-color: #f2e9e4">
      <!-- Navbar content -->
    </nav>
    
    <div class="container-fluid">
        <canvas id="myCanvas" style="position: absolute; z-index: 1">Your browser does not support HTML5.
        </canvas>
    </div>

html css canvas bootstrap-4

Answer 1

Answer №1

To keep the canvas square, you can utilize event listeners for the resize and ready events. Within these events, you can determine the screen width and height to adjust the canvas dimensions accordingly.

Here is an example:

const adjustCanvasHeight = () => {
    let maxSize = $(window).width();
    const otherSizesThatChangeHeight = $('nav').height() + 16 // 16px from body margin;

    if ($(window).height() - otherSizesThatChangeHeight < maxSize) {
        maxSize = $(window).height() - otherSizesThatChangeHeight;
    }

    $idolCanvas.css({
        'width': maxSize,
        'height': maxSize
    });
}

$(document).ready(adjustCanvasHeight);
$(window).on('resize', adjustCanvasHeight);

This code will set the width and height of the canvas to either the window's width or height (whichever is smaller), ensuring it stays within the confines of your window while maintaining a square shape.

Below is the complete code snippet:

// Initialize the canvas
var canvas=document.getElementById("myCanvas");
canvas.width = 1100;
canvas.height = 1100;
var ctx=canvas.getContext("2d");
ctx.fillStyle = "#4A4E69";
$idolCanvas=$('#myCanvas');

// Initialize the drag functionality
var isDragging = false;
var startX;
var startY;

// Arrays of the idols
var idols=[];
var NUM_IDOLS=0;

// Trigger the idols to load
for(var i=0;i<idols.length;i++){
  idols[i].image.src=idols[i].url;
}

//////////////////////////
//// CHECK THIS
//////////////////////////

const adjustCanvasHeight = () => {
    let maxSize = $(window).width();
    let otherSizesThatChangeHeight = $('nav').height() + 16; // 16px from body margin

    if ($(window).height() - otherSizesThatChangeHeight < maxSize) {
        maxSize = $(window).height() - otherSizesThatChangeHeight;
    }

    $idolCanvas.css({
        'width': maxSize,
        'height': maxSize
    });
}

$(document).ready(adjustCanvasHeight);
$(window).on('resize', adjustCanvasHeight);

...

// Additional functions and styling continue below...

Answer 2

To keep the canvas square, you can utilize event listeners for the resize and ready events. Within these events, you can determine the screen width and height to adjust the canvas dimensions accordingly.

Here is an example:

const adjustCanvasHeight = () => {
    let maxSize = $(window).width();
    const otherSizesThatChangeHeight = $('nav').height() + 16 // 16px from body margin;

    if ($(window).height() - otherSizesThatChangeHeight < maxSize) {
        maxSize = $(window).height() - otherSizesThatChangeHeight;
    }

    $idolCanvas.css({
        'width': maxSize,
        'height': maxSize
    });
}

$(document).ready(adjustCanvasHeight);
$(window).on('resize', adjustCanvasHeight);

This code will set the width and height of the canvas to either the window's width or height (whichever is smaller), ensuring it stays within the confines of your window while maintaining a square shape.

Below is the complete code snippet:

// Initialize the canvas
var canvas=document.getElementById("myCanvas");
canvas.width = 1100;
canvas.height = 1100;
var ctx=canvas.getContext("2d");
ctx.fillStyle = "#4A4E69";
$idolCanvas=$('#myCanvas');

// Initialize the drag functionality
var isDragging = false;
var startX;
var startY;

// Arrays of the idols
var idols=[];
var NUM_IDOLS=0;

// Trigger the idols to load
for(var i=0;i<idols.length;i++){
  idols[i].image.src=idols[i].url;
}

//////////////////////////
//// CHECK THIS
//////////////////////////

const adjustCanvasHeight = () => {
    let maxSize = $(window).width();
    let otherSizesThatChangeHeight = $('nav').height() + 16; // 16px from body margin

    if ($(window).height() - otherSizesThatChangeHeight < maxSize) {
        maxSize = $(window).height() - otherSizesThatChangeHeight;
    }

    $idolCanvas.css({
        'width': maxSize,
        'height': maxSize
    });
}

$(document).ready(adjustCanvasHeight);
$(window).on('resize', adjustCanvasHeight);

...

// Additional functions and styling continue below...

Elastic canvas to always match the full size of the container or screen

Answer №1

Similar questions

Webgrid columns lose their width after a postback event

I am encountering an issue with my PHP code that is causing an error

Tips for retrieving text without a class or id using selenium and python

Adjust the contents of a DIV depending on which Toggle button is selected

After transitioning to TypeScript, the CRA app is encountering issues loading CSS files compiled by SASS

Ways to retrieve the scroll position of content within an iframe

Modifying the HTML content of a span element does not always initialize all of its properties

Using a JSON file as a database for a project featuring HTML, CSS, and Vanilla JavaScript

"Embrace the power of Bootstrap 3 with a cutting-edge logo,

What is the best way to style my text fields in Django using Bootstrap?

Unable to alter or eliminate the grey background using material-ui

Ensure the menu bar remains at the top of the page without using the position:

Send the value of an li element using AJAX when clicked back to the original page

Having trouble getting the HTML input textbox onChange event to fire properly?

Multiplication and Division with Unit-ed Values in CSS calc() Function

Safari doesn't seem to recognize z-index property

Designing Interactive Interfaces using React Components for Dynamic Forms

The CSS keyframe for mobile devices initiates from 100% and then proceeds to animate

The problem of Rails redirect_to not working with anchor and will_paginate gem

Affix Object to Bottom of Stationary Element