Getting Wrong Canvas Height

Getting wrong canvas height

As you are not setting the size of the canvas element its bitmap will default to 300 x 150 pixels. If you use CSS rules then the element will be stretched but the bitmap will, stay at the same size just scaled to fit the size of the element (just like an image would).

Here is how to dynamically fit a canvas element inside a parent element settings its size properly:

First, remove the width and height from the CSS rule:

#app canvas {
    border:2px solid red;
    }

Then use getComputedStyle to get the parent element's dimension in pixels:

var cs = getComputedStyle(app),
    width = parseInt(cs.getPropertyValue('width'), 10);
    height = parseInt(cs.getPropertyValue('height'), 10);

The parseInt will remove the px at the end - now simply use those for the canvas element:

canvas.width = width;
canvas.height = height;

Working fiddle here

Incorrect canvas width value

canvas.width and canvas.style.width are two different things. In most of the cases, they should be equal, but they can also be different for achieving various effects. 300 you're getting is the canvas default width.

canvas.width is the actual number of pixels that are available inside the canvas, while canvas.style.width is the width of the HTML element, thus you can see stretching, pixelation, etc, if the two numbers are different.

---

Here are a couple of answers that describe the issue in more detail:

• https://stackoverflow.com/a/28142612/965907
• https://stackoverflow.com/a/34539170/965907
• https://stackoverflow.com/a/28879318/965907

HTML5 Canvas Width/Height Incorrect

You need to describe canvas difrent change your code from:

<canvas id='canvas' style='border: 1px solid; width: 1920px; height: 1080px;'>
</canvas>

to:

<canvas id='canvas' style='border: 10px solid' width= '1920' height= '1080' ;>
</canvas>

That's how you should describe canvas, and everything should work :D

Not getting actual canvas height and width, and fillRec()t is blurred out

Your problem is that the canvas has two sizes: the actual HTML element size and the drawing surface size

When you size the canvas with CSS, you only affect the drawing size. In order to change the element size, you need to set it with the height and width attributes inside the canvas element.

This is why you are getting 150 x 300 pixels all the time. That is the default size of the canvas element. You haven't actually change the size of the canvas element, only the size of its drawing surface.

Just change your canvas element like this

<canvas id="myCanvas" width="600" height="800"></canvas>

If you want more dynamic values you can use javascript to dynamically change the value of the height and width attributes.

var canvas = document.getElementById('myCanvas');
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight / 2;

Changing the size this way resizes the element and the drawing surface. Resizing with CSS only modifies the canvas drawing surface.

The blurred out image might be a product of the wrong resizing of your canvas, but I am not sure.

Here is more info: Canvas Basic Usage

Image in canvas got wrong size, ratio and got blur

When you create a canvas element, its default size is 150 CSS pixels by 300 CSS pixels. If your canvas element is resized using CSS rules, the "internal" size is maintained to 150*300 unless you change the attributes canvas.height and canvas.width. What does it mean in your code?

Your canvas has been stretched, the width changed to 100% of the window and the "external height" is 500, while the "internal" size is still 150x300, so anything you put draw will be stretched in the same way.

You can check these related Q&A: https://stackoverflow.com/a/4939066/1919228

Incorrect sizing of canvas context

The width attribute defaults to 300px and the height to 150px. Adding a stylesheet to the element merely scales the box to that size and does not extend the coordinate space.

A canvas element can be sized arbitrarily by a style sheet, its bitmap
is then subject to the 'object-fit' CSS property.

The intrinsic dimensions of the canvas element when it represents embedded content are equal to the dimensions of the element's bitmap.

The HTML attributes (width and height) sets the canvas dimensions, which determines how objects are measured on the canvas.

The CSS style sets the canvas display size, which determines dimensions of canvas on browser. If the display size is different from the dimensions, the canvas will be stretched when drawn.

When a canvas element represents embedded content, it provides a paint source whose width is the element's intrinsic width, whose height is the element's intrinsic height, and whose appearance is the element's bitmap.

Whenever the width and height content attributes are set, removed, changed, or redundantly set to the value they already have, if the canvas context mode is direct-2d, the user agent must set bitmap dimensions to the numeric values of the width and height content attributes.

The width and height IDL attributes must reflect the respective content attributes of the same name, with the same defaults.

Conclusion

There is a difference between the canvas dimensions and the canvas display size.

If you only define the dimensions, that will also be used as the display size, i.e. the canvas is drawn at scale 1:1.

If you only define the display size, the dimensions will get the default value 300 times 150.

You have more information here.

Wrong rectangle size in canvas

The first thing to know is that a canvas element has intrinsic dimensions = number of pixels in the inside coordinate space (set by the width and height attributes and properties). It also has extrinsic dimensions (style.width and style.height) which is the number of pixels that the image takes within the webpage. The intrinsic pixels are scaled to fit the extrinsic space.

It's confusing because an img also has intrinsic and extrinsic dimensions, but the names of the properties are completely different from canvas. If you set width and height on an image, it's basically the same as setting style.width or style.height; they both set the extrinsic dimensions to scale the image within the page. Meanwhile, you can only get the intrinsic dimensions of an img using the new naturalWidth and naturalHeight (HTML5 browsers only) properties.

If the extrinsic dimensions are not set on both img and canvas, the image will be laid out at the same size as the intrinsic dimensions (i.e., scale factor would be 1).

Now, when you use jQuery, $(canvas).width('310px') is the same as $(canvas).css('310px'), which sets the extrinsic dimensions. You have to call $(canvas).prop('width', 310) or simply set canvas.width = 310 to set the intrinsic width.

HTML 5 canvas: fillRect() produces completely incorrect results

Adding a width & height attribute to your <canvas> html element should fix the problem. More info

Ex: <canvas width="500" height="500"></canvas>

var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');ctx.fillStyle = 'green';ctx.fillRect(10, 10, 100, 100);

canvas {  background-color: aqua;  border: 1px solid black;}

<body>  <canvas id="canvas" width="500" height="500"></canvas>  <script src="canvas.js"></script></body>

Getting the height of a canvas element

As @Alex says, you can use the getComputedStyle function to get the current size of the canvas.

But... to make the canvas full screen width and height always, meaning even when the browser is resized, you need to run your draw loop within a function that resizes the canvas to the window.innerHeight and window.innerWidth.

Once you do that, you can use the normal canvas.height and canvas.width functions to get properly the canvas size:

(function() {
    var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

    // resize the canvas to fill browser window dynamically
    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        /* Your drawings need to be inside this function
         * to avoid canvas to be cleared. */
        drawStuff(); 
    }
    resizeCanvas();

    function drawStuff() {
        console.log(canvas.height); //925
        console.log(canvas.width); //1627
        // do your drawing stuff here
    }
})();

Plus: Use this CSS hacks to make the canvas full size without problems:

/* remove the top and left whitespace */
* { margin:0; padding:0; } 

/* just to be sure these are full screen*/
html, body { width:100%; height:100%; }

/* To remove the scrollbar */
canvas { display:block; } 

---

Related Topics