I've done a lot of searching, but I am unable to solve this problem I'm having.
I have a canvas nested in a div, with the intention of having the div serve as the background for the canvas, so that I can draw objects on it and whatnot.
When I run my code, the canvas appears side by side with the div, and I am unsure what to change to fix it.
// html
<body>
<div id="root">
<div id='board'>
<div>test</div>
<canvas></canvas>
</div>
</div>
</body>
// css
#board {
position: relative;
display: flex;
width: 640px;
height: 640px;
}
// js
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
canvas.width = canvas.offsetWidth
canvas.height = canvas.offsetHeight
Looked up similar questions on here with little success. Insight would be very appreciated!
You can add this styling for example, to center your canvas and then add more items as you need to the background div.
canvas {
background-color: green;
width: 200px;
height: 200px;
align-self: center;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
}
I added an image of the result.
Related
I'm working on the UI for a website and it looks perfect when the zoom is set to 75%. But if I zoom in any more than that, shapes get wonky and elongated, and distorted. For example, a <div> that should be a square will become a rectangle.
What I want: To completely prevent this from happening, I want the shapes to remain in their original state and for the page to not change in appearance upon zooming in/out. The only thing I want zooming to do is to zoom in on something, not enlarge it or distort it.
Here are some pictures of what I mean:
How it should look - <div>s are square-shaped here:
How I don't want it to look after zooming in:
Tried: setting a specific height and width for all divs in the CSS.
For example,
height: 200px;
width: 250px;
Did not work!
Any help is greatly appreciated! I do not want anything to change size or shape at all! By the way, I am using Bootstrap on my page.
Here is my HTML:
<div class="col-3">
<div class="wrapper-vids">
<div class="stranger-peer-vid">
<video class="video-s" id="videoS" autoplay></video>
</div>
<div class="local-peer-vid">
<video class="video-l" id="videoL" autoplay></video>
</div>
</div>
</div>
Here is the corresponding CSS:
.wrapper-vids {
margin:11px;
contain: content;
}
video {
transform: scaleX(-1); /* mirror effect*/
-webkit-transform: scaleX(-1); /* mirror effect*/
}
.stranger-peer-vid {
height: 350px;
width:480px;
background: black;
}
.local-peer-vid {
height: 350px;
width:480px;
background: black;
margin-top: 5px;
}
.video-l {
height: 350px;
width:480px;
left: 0;
bottom: 0;
}
.video-s {
height: 350px;
width:480px;
}
I have a situation where I have a div container with an image inside of it. The image is a variable asset so I never know what the height and width of the image will be. I want the div container to always fit to the size of the image and then add some padding to it... so for example if the image inside is 200px by 100px then the container should stretch to be 200px by 100px and then have 30px padding around it.
Here is an example of the CSS I'm using.. (the image is meant to be centered within the div vertically and horizontally):
#container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: red;
border-radius: 20px;
transform: translate(120px, 54px);
padding: calc(21px/2) calc(58px/2);
}
#container:hover {
background: pink;
}
Just for reference this is the html element:
<div id="container"><img src="image.png"></div>
So far I haven't been able to find any css trick that works. I tried using "fit-content" on the container, but it seems like fit-content is more for stretching the image to fit the container, not the other way around, so I resorted to using Javascript:
var container = document.getElementById("container");
container.style.width= container.querySelector('img').offsetWidth+"px";
container.style.height= container.querySelector('img').offsetHeight+"px";
I would rather not use JavaScript if I don't need to, so please let me know if there is a simpler way of doing this...
AFAIU, Your code is working as expected without the JavaScript:
#container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: red;
border-radius: 20px;
transform: translate(120px, 54px);
padding: calc(21px/2) calc(58px/2);
}
#container:hover {
background: pink;
}
<div id="container">
<img src="https://picsum.photos/400">
</div>
Ok guys, I solved it...
I had this in my css:
#page img, #page div {position: absolute; border: 0;}
This was causing the image to have an absolute position which pulled it out of the document flow. Once I added position: relative to the img, it started working.
I appreciate the responses everyone. It was helpful! Thank you!
If I understand right this is what you want. No matter what size the image is the container will be 20px bigger.
#container {
float: left;
background: pink;
}
#image {
width: 500px;
height: 300px;
padding: 20px;
animation: size 5s linear infinite alternate;
}
#keyframes size {
from {width: 100px; height: auto;}
to {width:400px; height: auto;}
}
<div id="container">
<img src="https://static.toiimg.com/photo/72975551.cms" alt="pic" id="image"/>
</div>
I would like to get a circle to expand from itself, while keeping the original circle. What I want is something like when you hover over the circles (e.g. water) on this page (click lets get started to see the circles). I'm not sure how to do this. Note that my knowledge of jQuery is quite small, so if you find a way to do this with jQuery, can you try to keep it simple? Thanks in advance. The earlier the better, as this is for a school project.
I tried to make the div have a function for onmouseover, but then I don't know how to get the rest. I was thinking about while the div animates from a smaller width and height, to move the circle, but the circle will still expand from the middle, and not the old circle.
Start with a CSS-only setup, then see if you actually need Javascript at all. This will generally always be more responsive/faster-loading. However, if you're already loading a JS library and it has functions built for this (like jQuery), then sure make use of them. There are plenty of tutorials for animating elements, CSS or JS.
Play around with numbers and styling as you wish.
Codepen
#container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
}
.circle:before {
content: "";
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
z-index: -1;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: 0.5s ease-in-out;
}
.circle:hover:before {
transform: scale(1.7) translate(-20%,-30%);
background-color: pink;
}
<div id="container">
<div class="circle red"> </div>
</div>
I have 2x Divs and 1x Img with the following CSS
#StageDiv {
position: absolute;
left: 50%;
margin-left: -200px;
}
#LogoDiv {
position: absolute;
margin-top: 135px;
left: 50%;
margin-left: -500px;
}
#logoimg {
/* max-width: 75%; /* */
width: 1000px; /* */
}
inside of #logoimg, I would like to use max-width: 75%; and then have margin-left: of both #LogoDiv and #StageDiv be a function of #logoimg as it changes
http://jsfiddle.net/3KLUW/1/
Is this possible in pure CSS or will I have to do this in javascript in a on resize event? (not sure what the actual function call is currently but im sure my buddy google will know) I think in the long run, I will most likely have to use a javascript event to scale my kineticjs stage anyway but I am curious to know if there is some CSS wizardry to do the first part.
Thoughts?
Edit:
window.onresize=function(){
var img = document.getElementById('logoimg');
var width = img.offsetWidth;
var div = document.getElementById('LogoDiv');
div.style.marginLeft= "-" + width/2 + "px";
};
still would be interested in a CSS solution
If you can get away with a wrapper div for the whole logo:
<div id="logo">
<div id="StageDiv">...</div>
<div id="LogoDiv">
<img id="logoimg" src="..." />
</div>
</div>
Then you can set the width and max-width on it, and use margin: auto to center it on the page:
#logo {
width: 1000px;
max-width: 75%;
margin: auto;
position: relative;
}
And positioning the other elements become much easier:
#LogoDiv {
top: 135px;
position: absolute;
}
#StageDiv {
text-align: center;
}
#logoimg {
width: 100%;
}
The margin: auto and text-align: center together give us the automatic margin you wanted.
Updated fiddle: http://jsfiddle.net/3KLUW/2/
The canvas will need to be scaled though, as you said on the question.
When drawing on a HTML5 canvas element, is it possible to leave part of it untouched? Can you take part of the image, and then redraw that part if its not directly possible?
The only solution I have thought of is to draw to a seprate, smaller canvas and then copy that over to the main canvas. Is this a feasible approach?
I wish to draw a game scene while preserving the ui. Unfortunately, the draw order is not known in advance.
I guess you're looking for .clip: http://jsfiddle.net/eGjak/122/.
ctx.rect(100, 50, 200, 100); // make a region
ctx.clip(); // constrain to that region
ctx.drawImage($("img").get(0), 0, 0); // draw image
Draw the UI on another canvas. You can layer canvas elements if need be.
HTML
<div id="gameframe">
<canvas id="game-ui"></canvas>
<canvas id="game"></canvas>
</div>
CSS
#gameFrame { position: relative; width: 800px; height: 800px;}
#game-ui { position: absolute; z-index: 10; bottom: 0; left; 0; height: 50px; width: 100%;}
#game { position: absolute; z-index: 5; height: 100%; width: 100%;}
Yields
-------------------------------------------------------
- -
- -
- -
- <canvas id="game"> -
- -
- -
- -
- -
-------------------------------------------------------
- <canvas id="game-ui"> -
-------------------------------------------------------
When creating Canvas games i've always layered the GUI on top of the game canvas.
#ui{position: fixed; margin-left: auto; margin-right: auto; z-index: 1000; width: 500; height: 500}
#game{position: fixed; margin-left: auto; margin-right: auto; z-index: 999}
<div id="ui"><!--UI elements--></div>
<canvas id="game" width="500" height="500"></canvas>
Obviously you can layer another canvas on top, or build the UI using html elements.