I am trying to draw some shapes on the HTML5 canvas using Javascript.
When the width and height of the canvas is of a hard coded size like for example 800x600 everything works fine.
What I would like to do is to stretch the width of the canvas to fit the parent (the size of the parent can be anything). When I apply the width: 100% and height: 100% properties in the CSS, the shapes drawn start from a different starting point from what it actually should.
A sample of what I am working on is provided in this link:
http://jsfiddle.net/jR4ne/
Please help me out in understanding what is going wrong here. It appears that the canvas is being stretched instead of being enlarged. I want the canvas to be enlarged to fit the parent.
For your case, you shouldn't use CSS to change the size. You have to specify the width and height in pixel for Canvas.
You can add the code below to your JS () and it will meet your requirement:
canvasNode.width = document.body.scrollWidth;
canvasNode.height = document.body.scrollHeight;
Of course, your parent may refer to different things, you need to change the width and height accordingly. Please refer to here for more info: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
It looks like the canvas is being initialised too early, before it has been resized to width 100%: the drawn rectangles also render in stretched mode. I would suggest putting the initialisation code into an onload function e.g.
<body onload="setupCanvas()">
or with jQuery:
$( function() { setupCanvas(); } );
I would also suggest removing the width/height attributes from the HTML (not sure if they are just there temporarily as the css width 100% is not working?)
Related
I've made an example on paint
This might be overthinking this but I'm trying to have a div that always keeps its aspect ratio (9:16) and that is showing entirely on screen whatever the windows size. I tried searching for "div keep aspect ratio" but in these cases the div doesn't resize with the window. I thought using javascript to check when the height of the window is greater than its width (and vice versa) and change the css but I don't know if it's possible to run a javascript function upon resizing the page. Also, all my content is in this container and I just want black bars to fill the rest.
Thanks for helping.
There are lots of ways to do that.
use javascript resize function:
window.onresize = function() {
// resize your div according to window size
};
use Jquery resize function:
$(window).resize(function(){
// resize your div according to window size
});
use css #media https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
#media all and (min-height:640px) and (max-height:960px){
// resize your div according to window size
}
The images can be wider than the width of their container or smaller than it. To control the width of larger images, I can use max-width: 100%. Similarly, I can also set width:100% for smaller images.
Is there any way to set image width to 100% only if the original image is at least 50% of its container width? I will prefer a CSS based solution if it exists because the images will load dynamically.
var containerDiv = $(".container");
var image = $(".img");
image.width(image.width()>containerDiv.width()?containerDiv.width():image.width());
Since the images will load dynamically, I think your best shot is with javascript. You'll need to get the width of the image (Determine original size of image cross browser?), and then you can compare that to the parent of the image, and determine if it's above or below 50%.
UPDATE:
Considering the question didn't provide any sample code, I didn't want to just guess. But, the pseudo code would look something like this:
// after ajax completes
var image = jQuery('.image'),
parent = image.parent();
if (image.width() * 2 >= parent.width()) {
image.css('width','100%');
}
I have some trouble making my design work. I looked around the web a lot, but I can't find what I'm looking for.
I'm trying to make something like that: concept design
The thing is that I started by doing that with CSS only, but it's not the good solution, because if my picture has a different ratio or another reason, it will not work at all.
What I'm trying to achieve is that inside a div, I have one big image and in the other div (floating left or right), I want two small images, one over the other, taking the same height as the big one. All this (the two divs) should take 100% width of the body, but I don't really know how to achieve that. I'm not sure to understand how to make height responsive with the width...
I also have some weird margin between my images... Can you help me delete them as well?
So my code is via this link: http://codepen.io/anon/pen/MygaEB
Someone (Giovanni Perillo) suggested me to have this Javascript code:
var div1 = document.getElementById("colonne-gauche");
var div2 = document.getElementById("colonne-droite");
var height1 = div1.offsetHeight;
var height2 = div2.offsetHeight;
if (height1 > height2) {
div2.style.height = height1;
}
else {
div1.style.height = height2;
}
The thing is that it's not working at all. I'm sure it's a code I could use, but I'm not sure how to make it work in my code.
EDIT : I tried to look what I was able to do with Flexbox, but it doesn't seem to work. Flexbox allow two box to be side by side, with the same height, but it need to be the same width as well. What I want is something more responsive like the big image is taking 3/4 width and the two images (in the same div) are taking 1/4 width, but they have the same height in total as the big image. I'm sure it's totally possible to do that like all masonry layout, but me it's not really a masonry, but something that stay the same : One big image and two little, but responsive depending of image size.
EDIT 2 : The code needed should allow to change the width of each divs to make sure that they have the same height (without changing image aspect ratio). It should work with different images aspect ratio as well. The example bellow show a div with three images, but that's just to say that div should change width dynamically to have the same height.
Javascript is not necessary. You can accomplish this with just CSS. To make side by side divs equal in height you need to make html and body have a height of 100% then you have to specify a height for your container div (this can be a percentage or a specified length). In this case I used a height of 500px for the .section class. Then for the inner containers you need to specify a height of 100%. Then each image within that container needs a specified height, for one image use 100%, for two use 50%, etc. I also removed your inline styles. I also removed the section tag.
Here is the updated codepen.
Update:
To preserve aspect ratio change the height of the img tags to auto. Also, change the height of the .section class to auto. I also change the width of .colonne-gauche back to 65% and the width of .colonne-droite back to 35%.
divs are block elements. you can set display:inline-block; to make them align side by side.
To begin, here is a Fiddle example.
What I am attempting to do is center the content (i.e. the h1 and h2) with a flex box that scales to the current size of the background image. Based on my own attempts, I'm assuming this will have to be a JavaScript solution (e.g., I'll have to calculate the size of the background image post-scaling), but I'd certainly welcome any type of solution at all.
I suppose the most succinct way to ask this is: How does one center content on an element using background-size: contain?
Other general questions I have:
What's the best method for calculating the dimensions of a background-image, regardless of what background-size property it is using?
Would something other than a flex box be better at centering content for this specific scenario? It's easy enough to center things when using cover but this seems like a whole new ball game.
Is it possible to make the flex-container (denoted by the red border) match the size and constraints of the background-image with pure CSS? Note that I ultimately want this to be responsive and am not necessarily looking to define static heights.
It's not clear of what you really trying to achieve but I suspect you've just missed:
background-position:50% 50%;
Check: http://jsfiddle.net/farc8h1d/
answer is "no such method in principle".
<center> is still not reproducible by CSS means in full.
for defining width/height ratios by solely CSS see, for example,
this:
http://www.mademyday.de/css-height-equals-width-with-pure-css.html
Update: I think that I've got an idea of what you need. Here is another try: http://jsfiddle.net/6bzzj3j9/4/
Basic idea: to use <img> with width:100% ; height:auto; that defines size of its container. Text is inscribed in that container using position absolute.
This Fiddle is actually the behavior I was looking for. The JavaScript was furnished by this post.
However, the it only seems to work properly in Chrome; not Firefox or Internet Explorer. I'm investigating but that should better provide insight into what I'm trying to do.
Code:
var img = new Image();
var elem = document.getElementsByClassName("section-1")[0];
img.src = window.getComputedStyle(elem, null).getPropertyValue("background-image").replace(/url\(|\)$/ig, "");
function resize() {
var bgHeight = elem.offsetWidth * img.height / img.width;
elem.style.height = bgHeight + 'px';
}
window.onresize = resize;
resize();
Is there a way to prevent the redrawing of the screen while resizing a responsive website?
I want to have a responsive website, but I don't like the cheap animations that are involved when resizing the screen (media breaks, instant disappears, text wraps (really ugly))
I hope there is a way to tell the browser to redraw the screen only when resizing has stopped or some similar solution..
Is there?
No. When you change the size of any DOM element, including the body, all browsers "reflow" (i.e. redraw) the page. Even when you include an img element without an explicit size, the page will reflow when an image is loaded.
You may read more details here:
When does reflow happen in a DOM environment?
if you want to prevent redrawing set a timer something like that might help
var timeoutHandler;
var startet=false
resize=function(){
clearTimeout(timeoutHandler);
if(!startet){
startet=true;
//get body pixel width
//get body pixel height;
//save css width value
//save css height value
//set body width= width pixel value;
//set body height= height pixel value;
}
timeoutHandler=setTimeout(function(){
//restore css values
startet=false;
},100);
}