Html5 canvas not resizing to fit container

I'm currently working on creating a square canvas using CSS to ensure it is instantly sized when the page loads.

To achieve this, I am wrapping the canvas in a div and applying the following styles:

http://jsfiddle.net/evopgwzd/

body {
    background-color: blue;
}

#wrap {
    width: 40%;
    height: 0;
    padding-bottom: 40%;
}

canvas {
    background-color: white;
    width:100%;
    height:100%
}

Unfortunately, I'm facing an issue where nothing is being displayed. When I manually set specific widths for the wrap using pixels or percentages, the canvas shows up. I believe I might be overlooking a simple detail, but I can't pinpoint what it is.

csshtmlcanvashtml5-canvas

Answer №1

When you set the height to 0, it also affects the canvas and makes it invisible. Try this instead:

body {
    background-color: blue;
}

#wrap {
    width: 40vh;
    height: 40vh;
}

canvas {
    background-color: white;
    width:100%;
    height:100%
}

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

Change an ASP page into an image format such as JPEG or PNG

Seeking assistance to convert my classic ASP page containing label controls styled with positioning to images in JPG or PNG format, and then send them using CDO. Using Dreamweaver for this task. Any help would be greatly appreciated. ...

cssimageasp-classicdreamweaver

Defeat the all-powerful !important tag and enable dialog customization for positioning

I am currently developing a browser extension and I am encountering an issue with using JQueryUI to display a modal dialog. The problem arises when certain websites, for example espn.com, also utilize JQueryUI but do not properly scope their own elements. ...

javascriptjquerycssjquery-ui

Generate a dynamic text-box and drop-down list using HTML and JavaScript

My current project involves generating dynamic text-boxes based on the selection from a drop-down list and input field. https://i.sstatic.net/CMtW9.png When a user chooses 'Option 1' from the drop-down list and enters input such as 'grass& ...

javascripthtmlvue.js

Dropdown Menu in Bootstrap fails to display any items

My customized bootstrap navbar dropdown is behaving oddly in my custom navbar. Any thoughts on why this is happening and how to resolve the issue? The screenshot below illustrates the problem - the dropdown menu items are not visible unless I hover over th ...

phpcssbootstrap-5

The 3D hover effect is malfunctioning in the Firefox browser

I've been working on a 3D hover effect and my code is functioning properly in Opera and Chrome, but for some reason it's not working in Firefox. I've even attempted using vendor prefixes, but to no avail. The strange thing is that when I rem ...

htmlcsscss-transforms

Using React Native's stylesheet to apply multiple values in a CSS statement

Here's a scenario to help clarify my question: Imagine I want to add margin to an element in the following way: const myView = () => <View style={styles.viewStyle}></View> const styles = StyleSheet.create({ viewStyle: { margin: ...

javascriptcssreactjsreact-native

Is there anyone who can help me troubleshoot my code problem involving bootstrap specifically on Safari?

Encountering an issue with Bootstrap 4 and Safari on Mac. The problem arises when using cols within a row, causing my form to load incorrectly on Safari. Any assistance in fixing this issue would be greatly appreciated. In Chrome, the layout displays corre ...

htmlbootstrap-4safari

Creating a Vertical Stack of Three Divs in ReactJS

Just Getting Started: As a newcomer to ReactJS and web development in general, I've put effort into researching my question without success. I acknowledge that the solution might be simpler than I think, so I apologize in advance if it turns out to b ...

htmlcssreactjsmaterial-ui

The Laravel href link will fail to work when the URL does not include the string 'http'

I am encountering an issue with a particular hyperlink tag <a href="{{ $organization->website }}">Link</a> When the URL in $organization->website does not start with http:// or https://, the link fails to direct me properly. Instead, i ...

htmllaravelhttphref

Obtain the Chosen Item from a List Box Using JQuery and Separate by Commas

Seeking further assistance with the following issue. I have set up the code on jsfiddle at... http://jsfiddle.net/justinerswell/feDTU/ I am looking to extract the last item in the substr and then work backwards to fill in the necessary fields. Appreciat ...

jqueryhtmlloops

Margin and padding have the ability to increase the size of an image

Is there a technique to position the logo.png so that it appears approximately one-third of the way across the page without affecting its size? I've attempted to use padding or margin adjustments, but it seems to distort the image despite having limit ...

htmlcssimage

Styling an unordered list with CSS in HTML is a powerful

I am working with an unordered list where each list element contains two spans: span A and span B. My goal is to style these elements so that they are displayed horizontally on the screen, with span A above span B in each set. Example: spanAItem1 sp ...

htmlcss

How can I conceal the contents of a webpage until the entire page has finished loading before revealing them?

Is there a way to delay displaying my login template until all elements are fully loaded? Currently, when I visit the site, the template appears first followed by fonts and other components. I want to ensure that nothing is shown to the user until the enti ...

javascripthtmlfunctionclassvue.js

Ensure that the three.js script remains in a fixed position on a page that can be

Is there a way to make a 3D model created with three.js have a fixed position on a scrollable page, like a background while the rest of the content scrolls normally? Are there any CSS techniques or additional script elements that can be used to achieve thi ...

javascriptcsshtmlthree.js3d

Converting a PHP array to a JavaScript array causes an issue of undefined variable when attempting to access a PHP array that has

I've been searching through other questions without finding the answer, so I'm reaching out for help with my specific issue. My problem is transferring a php array to a javascript array. In my code editor (phpStorm), I'm getting an error st ...

javascriptphpjqueryhtmllaravel

Once the <a> element is clicked, ensure that the function finishes executing before attempting to click/process it again

Utilizing jQuery.get for AJAX requests, I trigger a server request when the user clicks on the <a> element. The response is then used to update the content within the <div id='aaa'>. However, if the user clicks on the <a> rapid ...

javascripthtmljqueryajax

What is the best way to implement dragging functionality for an image within a specific area?

Here's a snippet of the code I'm working with: link This is the HTML code: <div class="border"> <div id="i-choose"> <input type="file" name="file" id="file" class="inputfile"> <label for="file"& ...

htmlcssdrag-and-drop

Why do elements align horizontally in a div even when I specify it to display as a block?

My understanding is that display: block is the default setting. However, even after specifically setting display: block, my div was still aligning items horizontally. The only solution I found was to use: display: flex; flex-direction: column; Any insight ...

htmlcss

Is it possible for a gradient to maintain the original width of the element to which it is added?

Is there a way to create a gradient that remains static and masks out certain visible parts? I want the countdown timer to darken as it nears the end. Currently, my gradient only reduces colors in between while keeping the left and right colors: (funct ...

javascripthtmlcss

Tips on formatting text as bold or italic when tweeting from my website to our Twitter account

Currently, I am utilizing the Twitter OAuth library in conjunction with PHP to publish a tweet from my website directly to my Twitter account. My main objective is to highlight some text while posting, however, I have not been successful in identifying t ...

phphtmlcsstwitter