CODEWITHSUNDEEP
javascripthtml
SynataxError
SynataxError

Reputation: 13

html/javascript canvas height/width coordinates not the same?

For some reason height and width dont seem to be the same relative to each other here is an example: https://jsfiddle.net/Lo2hgg54/

javascript

var canvas=document.getElementById("canvass");
var canv=canvas.getContext("2d");
canv.beginPath();
canv.rect(100,100,200,200);
canv.fillStyle="green";
canv.fill();

html

<canvas id="canvass">
</canvas>

can anyone explain why 200width and 200height arent the same? thanks.

Upvotes: 0

Views: 45

Answers (2)

Jonathan Lam
Jonathan Lam

Reputation: 17351

The problem is that the canvas is cut off. If you use the Chrome's debugging tools, you can see that the canvas' dimensions are 300x150px (the default).

Try making your canvas like so:

<canvas id="canvass" height="300"></canvas>

This will be large enough to contain the rectangle.

Upvotes: 1

adeneo
adeneo

Reputation: 318202

Your canvas is just not big enough to display the entire rectangle, it's being cut off at the bottom of the canvas, which is why it looks like it's not high enough

var canvas=document.getElementById("canvass");
var canv=canvas.getContext("2d");

canv.beginPath();
canv.rect(100,100,200,200);
canv.fillStyle="green";
canv.fill();
<canvas id="canvass" height="500" widht="500">
</canvas>

The specification for HTML5 explicitly states that :

The width attribute defaults to 300, and the height attribute defaults to 150.

Upvotes: 1

Related Questions