CODEWITHSUNDEEP
javascriptcsshtmlcanvas
hamburger
hamburger

Reputation: 1425

Getting wrong canvas height

I get a wrong canvas height. Whats wrong here? I made a fiddle: http://jsfiddle.net/hbcz6/

HTML:

<div id="app">
    <div id="percent" class="animated"></div>
    <canvas></canvas>
</div>

Javascript:

var canvas = document.getElementsByTagName("canvas")[0];

var context = canvas.getContext('2d');
var x = canvas.width / 2;
console.log("canvas X: ", x);
var y = canvas.height / 2;
console.log("canvas y: ", y);

Please have a look to your console.

Upvotes: 1

Views: 1699

Answers (2)

user1693593
user1693593

Reputation:

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

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

You aren't setting the canvas's dimensions. Using CSS to style it only affects the rendered result, it does not affect the underlying canvas that is being drawn on. In this case, it is using the default sizes, and then stretching it to cover the container.

Upvotes: 0

Related Questions