Issue with the dimensions and proportions of the canvas

After creating a canvas with HTML and setting the ratio to 16/9 in the CSS, I specified a width of 100vw and added a border. However, I noticed that the canvas appeared larger than expected on the screen.

#canvas{
width: 100vw;
aspect-ratio: 16/9;
border: 5px solid red;

}

To address this issue, I had to adjust the size and padding accordingly.


*{

margin: 5px;

margin-left: 3%

}

.canvas{

width: 80vw;

aspect-ratio: 16/9

border: 3px solid red;

}

Although this solution worked, I was hoping for a fullscreen display.

Screenshots:

https://i.sstatic.net/mt8Ys.png

https://i.sstatic.net/iYCWO.png

https://i.sstatic.net/bv9MH.png

css

Answer №1

To ensure your canvas adjusts dynamically to window size, use this JavaScript snippet:

const myCanvas = document.querySelector("canvas");
myCanvas.width = window.innerWidth - myCanvas.offsetLeft;
myCanvas.height = window.innerHeight - myCanvas.offsetTop;

This code will set the canvas dimensions to match the window size and adjust for any other HTML elements present. Don't forget to add an event listener to update the canvas size when the window is resized:

addEventListener("resize", function(){
    myCanvas.width = innerWidth;
    myCanvas.height = innerHeight;
    //INCLUDE FUNCTIONS TO CALL HERE!!
})

Remember to call any necessary functions that need to be reset, such as those involved in object generation.

Answer №2

To adjust the width of your canvas, you need to account for the border by subtracting it from the total width:

body {
  margin: 0;
  overflow: hidden;
}

#canvas{
  width: calc(100vw - 10px);
  aspect-ratio: 16/9;
  border: 5px solid red;

}

Check it out here: https://codepen.io/kikosoft/pen/ZEmjRxW

Keep in mind that I've set the body's margin to zero. If yours is different, make sure to adjust accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Semantic UI (React): Transforming vertical menu into horizontal layout for mobile responsiveness

I have implemented a vertical menu using Semantic UI React. Here is the structure of my menu: <Grid> <Grid.Column mobile={16} tablet={5} computer={5}> <div className='ui secondary pointing menu vertical compact inherit&apos ...

javascriptcssreactjssemantic-uisemantic-ui-react

Vertical button group within a Bootstrap 5 input group

How can I create an input-group for increasing or decreasing numbers? Below is the code I have: <div class="input-group input-group-sm"> <input type="text" class="form-control" placeholder="0.9"&g ...

htmlcssbootstrap-5

Is it possible to adjust the scroll top position using inline style in angularJS/CSS?

I am working on storing the scrollTop value of a vertical menu in my controller so that I can set it up each time I return to the page for persistent scrolling. Does anyone know how I can achieve this? This is the code snippet I am currently using: < ...

htmlcssangularjs

Text not perfectly centered on the page

I'm working on a layout with 4 columns, and I want the first 3 columns to display text vertically. However, I'm having trouble aligning the text in the center of the column. Even after using justify-content and align-items properties, the text is ...

htmlcss

Add a transition or animation effect to the <details> element as it closes

I am experimenting with adding a transition effect to the details element when it opens and closes: details { height: 1em; transition: height 2s; border: 1px solid; overflow: hidden; white-space: pre; } details[open] { height: 6em } <det ...

htmlcss

Vue-Router functions only on specific routes

While my vue-router correctly routes the URL for all menu buttons, it's not displaying each Vue component properly. You can see a demonstration here. Here is a snippet of my HTML (using Vuefy) <div class="navbar-start"> <a ...

javascriptcssvue.jsvuejs2vue-router

Bootstrap 4 collapsible navbar with a stacked design

I am struggling to create a collapsible navbar. Even though everything seems to be working, the nav items are not stacking vertically as they should be. Instead, they are appearing horizontally next to each other. Here is the code snippet: <nav class= ...

htmlcsstwitter-bootstrapbootstrap-4

an issue encountered while trying to print a webpage styled with CSS

Users are given the option to print the current page on the website by clicking on a menu element: <li> <a href="#" onClick="window.print()"> <i class="icon-print"></i> Print Page </a> </li> The page contai ...

javascripthtmlcss

Adjust the borderBottomColor of Material-UI TextField upon completion of input

When working with MUI to create a form, I noticed that the default TextField bottom border is grey, turns blue when focused, and then back to grey when focus is lost. My goal is to prevent it from losing the blue color after filling in the field: https:// ...

cssreactjsmaterial-uimaterial-design

How to make a div stretch to full browser height using CSS and jQuery

I've been attempting to stretch a div to the browser's height using CSS in jQuery, but it doesn't seem to be working. I can successfully apply 100% width to the div, but height is proving to be a challenge. Any ideas why this might be happen ...

jqueryhtmlcss

Spin the div in the opposite direction after being clicked for the second time

After successfully using CSS and Javascript to rotate a div by 45 degrees upon clicking, I encountered an issue when trying to rotate it back to 0 degrees with a second click. Despite my searches for a solution, the div remains unresponsive. Any suggestion ...

javascriptjquerycss

Creating a floating div that remains in place without disturbing the layout of the surrounding elements on

I am trying to place a div within a page at specific coordinates without affecting the rest of the content on the page. My initial approach was to give the parent container a position: absolute and the floating div a position: relative, then setting the p ...

htmlcss

Ways to customize decoration in Material UI TextField

Struggling to adjust the default 14px padding-left applied by startAdornment in order to make the adornment occupy half of the TextField. Having trouble styling the startAdornment overall. Attempts to style the div itself have been partially successful, b ...

javascriptcssreactjsmaterial-ui

What is causing the additional space at the bottom?

Why does my centered black border triangle have an extra bottom margin causing a scroll bar to appear? * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100%; background: blue; } .canvas { border: 10px s ...

csslayoutscreenpaddingmargin

Designing a Scrollable tbody Element while Preserving the Integrity of the tbody Columns

Currently, I am attempting to implement a scrollable tbody in order to run a React package smoothly. The challenge lies in achieving a scrollable tbody without having to resort to using display: block on the tbody element. Unfortunately, this solution dis ...

csshtml-table

Enhancing the appearance within an HTML input element

Let's consider a scenario where we have an input element with the following text: <input type="text" value="Lucas"> Is there a way to emphasize the "L" in the value as Bold, similar to Lucas? We are familiar with how this can be achieved usin ...

htmlcss

Ensuring Your IMG is Perfectly Centered in DIV Across all Browsers

I have tried all the tips from the top Google results, but I am still struggling to center an image within a div. For example, the popular tricks mentioned in this link: or http://www.w3.org/Style/Examples/007/center.en.html do not seem to work in IE 8. ...

css

What is the best way to initiate a function upon each page load?

(Apologies in advance for any English mistakes) Hello everyone, I am currently developing a simple Chrome extension to edit certain graphics and text fields on a website (Freshdesk) that cannot be modified directly on the site due to proprietary code. ...

javascriptjquerycssgoogle-chrome-extension

Maintaining the active status of section 1 after the page is refreshed using Javascript and CSS

I have a total of 3 buttons and 3 hidden sections available, which can be seen in the image below: click here for image description Whenever one of the buttons is clicked, the respective section transitions from being hidden to becoming visible: click he ...

javascripthtmlcss

html css javascript, Is it possible to execute a script before a webpage finishes loading?

My current setup is similar to a lightbox feature, but I'm facing an issue where the script waits for the entire webpage to load before running. Is there a way to ensure that my script runs first without waiting for the webpage to fully load? CSS: # ...

javascripthtmlcss