CODEWITHSUNDEEP
javascripthtmlcanvas
Richard
Richard

Reputation: 65510

Can't set size of canvas element?

I'm trying to draw a <canvas> element that is 500 by 1000 pixels, but my browser will only render an element of 300 by 150 pixels.

Here is my code: 

var c=document.getElementById('canvas');
var ctx=c.getContext('2d');
ctx.fillStyle='black';  
ctx.fillRect(0,0,500,1000);

JSFiddle here: http://jsfiddle.net/R8cxH/

I don't understand this, because the outer body element is wider than 300 pixels.

What am I doing wrong?

Upvotes: 0

Views: 2192

Answers (2)

Pavlo
Pavlo

Reputation: 44889

Use HTML attributes:

<canvas id="canvas" width="500" height="1000"></canvas>

If you need to set those properties dynamically, assign width and height properties before getContext():

var c = document.getElementById('canvas');
c.width = 500;
c.height = 1000;
var ctx = c.getContext('2d');

Upvotes: 4

Christoph
Christoph

Reputation: 315

you need to set the width and height of your newly created canvas

c.width = 500;
c.height = 1000;

Upvotes: 2

Related Questions