I don't know why but my JS won't return the correct values of my canvas' dimensions.
I have this to get the values:
temp = document.getElementById('myCanvas');
canvas = new Array();
canvas['width'] = temp.width;
canvas['height'] = temp.height;
My CSS & HTML is:
//html
<canvas id="myCanvas" class="c"></canvas>
//related css
.c{
width:100%;
margin:0 auto;
height:500px;
background-color:green;
position:absolute;
left: 0;
top: 0;
border:1px solid red;
}
The result of the array shows:
width: 300, height: 150
This cannot be correct if the CSS sets it as 500px and it shows on the screen as 500px. Why might this be ?
This is the correct size!
By setting canvas dimensions in CSS, you haven't changed the pixel-by-pixel size of the canvas. It's still the default 300x150, you just stretched the pixels. You can verify this if you draw a circle on the stretched canvas: you will get an ellipse. It's better to change the width and height attributes of the canvas tag directly, and not in CSS.
Source, Example
Related
I'm using a full screen canvas as background of the first section of my page. But as soon as I add the second section and vertical scrollbar appears, the height of canvas reduces a little bit and a gap appears. here's my code:
P.S: Sorry, my code contained bugs, I fixed them. now you can see the red gap.
var canvas = document.getElementById('canvas')
var c = canvas.getContext('2d')
scaleCanvas()
window.addEventListener("resize", scaleCanvas)
function scaleCanvas() {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
c.fillStyle = 'black'
c.fillRect(0, 0, canvas.width, canvas.height)
}
* {
box-sizing: border-box;
max-width: 100%;
}
body {
margin: 0;
padding: 0;
}
#first-section {
position: relative;
min-height: 100vh;
background-color: red; /* to see the gap */
}
#content {
position: relative;
z-index: 2;
}
#second-section {
min-height: 100vh;
background-color: blue;
}
#canvas {
display: block;
padding: 0;
margin: 0;
border: none;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
<div id="first-section">
<canvas id="canvas"></canvas>
<div id="content">content</div>
</div>
<div id="second-section"></div>
Assuming you mean full screen, and not full page. The two are very different.
If you mean full page then the link to the Screen API will also give you details on obtaining the page size.
Size full screen canvas.
The problem is that you have content that extends outside the page width and height (innerWidth, innerHeight)
The elements with ids first-section, content, and second-section must be inside the display area or else you will get a scroll bar. The scroll bar will change the innerWidth, innerHeight values subtracting the scrollbar width or height depending on which is visible.
To prevent scroll bars the best option is to keep all content inside innerWidth, and innerHeight
Full screen with scroll bars.
If you want have the scroll bars and you are using full screen you can use the Screen API to get the width and height of the display in pixels. You can set the canvas size to match the screen without the scroll bars effecting its size.
Note Do read the provided link to Screen as what defines the screen may not be as expected. EG more than one monitor, or device orientation will effect how you use the API.
Basic example
Thus when in full-screen mode you can set the canvas size and ignore scroll bars with
function sizeFullScreenCanvas() {
canvas.width = screen.width;
canvas.height= screen.height;
}
So, im doing a canvas that is deployed in front of an image. The image is in the background and because of it's size I need to put it inside an scrollable area.
Rendering the image inside the scroll it's not a problem and works fine. The problem comes when I do the same with the canvas.
Right now, the canvas width and height is calculated after loading the image.
img.onload = function () {
if (img.complete) {
self.canvas.height = img.height;
self.canvas.width = img.width;
The canvas data is correctly calculated and can be seen inpecting the html but it doesn't work. It's like it doesn't has width or height.
The CSS and HTML are very simple.
<div id="container" hidden>
<img id="mapImage">
<canvas id="mapCanvas">
</canvas>
</div>
#container {
max-height: 75vh;
max-width: 100vw;
overflow: scroll;
}
#mapCanvas {
border: 1px solid #000000;
}
I saw a post solving a problem like this but without the image.
What is what I'm missing?
Thanks in advice.
As the title says everything. I want to change the size of my HTML5 canvas. I am using fabricjs library to work with HTML5 canvas. However, fabricjs makes the size of the canvas smaller. Now I want to its size using css but it does not affect it. When I give other css rules to canvas then it does affect but not width and height.
jsfiddle
Here is my fabricjs code
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
left: 50,
top: 50,
fill: 'red',
width: 100,
height: 100
});
canvas.add(rect);
here is my html
<canvas id="c"></canvas>
and here is my CSS
#c {
width: 100%;
border: 1px solid green;
}
Found the answer. Below solution works for me
var canvas = new fabric.Canvas('c');
canvas.setHeight(500);
canvas.setWidth(800);
Second solution is
<canvas id="c" width="900" height="600"></canvas>
I have a problem to get my window size, I try this code:
Javascript
var game;
function game() {
this.canvas = document.getElementById('canvas');
this.canvasWidth = window.innerWidth;
this.canvasHeight = window.innerHeight;
this.initCanvas = function() {
this.canvas.style.width = this.canvasWidth + "px";
this.canvas.style.height = this.canvasHeight + "px";
}
this.run = function() {
this.initCanvas();
}
}
game = new game();
game.run();
I also have
CSS
html, body {
padding: 0;
margin: 0;
}
I only have a canvas in my body.
Problem is, that I have a vertical and horizontal scroll bar. This means the size of canvas is too large. How to make it of the window size without the scroll bars appearing?
It looks like you're just trying to make your canvas have a width and height of 100%. You can do this with just css:
HTML
<body>
<canvas id="canvas"></canvas>
</body>
CSS
body, html {
height: 100%;
width: 100%;
margin: 0px;
}
canvas {
background: #ffcccc;
height: 100%;
width: 100%;
display: block;
}
Demo
Or if you want to use your code but get rid of the scroll bars on the window, you need to specify block on the canvas tag.
CSS
canvas {
display: block;
}
Demo
When you use CSS to style your <canvas> element it will get scaled instead of sized. Be sure to set the .width and .height properties on the canvas element instead (ie canvas.width not canvas.style.width).
jsfiddle example
In the example the first canvas element is scaled correctly, the second (using CSS) is not scaled properly. This has to do with a default canvas element size (300x150) that CSS scales.
To prevent getting scrollbars when setting the <canvas> to the full window width/height set the body to overflow:hidden; as used in the jsfiddle above.
I am attempting to create a circle with a height of 10% the browser window. If I also make the width 10%, and you scale the browser, you get a misshapen or squished circle. I want to try to create the width of the circle with jquery to change in proportion with the height. so if 10% converts to 200px height, the width would be changed to 200px. I have tried a few solutions, but keep getting a width of 0px in return.
assuming you are using jQuery and your circle is an HTML element you could do this:
var $window = $(window),
$el = $('#someElement');
$window.on('resize', function () {
var size = $window.height() * 0.1;
$el.width(size).height(size);
});
Get the width and the height of the window and then simply check which one of them is the smallest. Get 10% of that value and use this as the circle's radius.
Little experiment using a transparent square image which is the direct child of <body>:
http://jsfiddle.net/2S3xU/3/
<html><body><img src="transparent-square.gif">
img {
border-radius: 99999px;
position: absolute;
top: 0; left: 0;
height: 100%; /* width will follow height to keep image undistorted*/
max-width: 100%;
max-height: 10%;
}
/* Opera fix*/
body, html {
width: 100%;
height: 100%;
}