HTML5 How to make canvas not stretch page?

Question

I have learned how to work with Canvases in HTML5, and I have a question.

Is there a way to make a canvas not stretch the other elements on the page? For example I have some text, if I put a canvas of 500px wide, the text is sent to the right to make space for the canvas, is there a way to put the canvas under the text or simply make it not stretch the other elements in the page, or is there simply a technique used to appropriately position canvases in a way so that it is where you want it to be exactly?

Thanks for your help.

Can you provide an example of your problem? [jsfiddle](http://jsfiddle.net/) — Danny, Feb 15 '13 at 18:06

redGREENblue · Accepted Answer · 2013-02-15T18:16:59.053

Just treat the canvas as you would treat a div. The way you size/position a div, you can do the same with canvas. If you are having a specific problem adjusting the canvas, post the code you are using.

Edit : Also, be careful if you are setting canvas height/width with CSS as it only changes the element size, not the drawing surface size. To make sure both the element and drawing surface size changes, use the width and height attribute.

score 2 · Answer 2 · edited May 23 '17 at 12:23

2

You should include the width and height attributes in the canvas element.

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

If you want to fit to screen automatic see question below
Resize HTML5 canvas to fit window

edited May 23 '17 at 12:23

Community

1
1

answered Feb 15 '13 at 18:04

Garry

4,996
5
32
44

score 2 · Answer 3 · 2013-02-15T18:28:05.853

2

Use css-style z-index to make your text above canvas.

Sample css:

#canvas_id
{
position:absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
z-index:-1;
}
#text_div
{
position:absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
z-index:0;
}

edited Feb 15 '13 at 18:28

answered Feb 15 '13 at 18:06

Looks like this technique does not work. I've set the div to z-index 0 and the canvas to -1 but it still stretches the page. – H3XXX Feb 17 '13 at 17:57

Denys Séguret · Answer 4 · 2013-02-15T18:32:33.807

0

A canvas is a flow element. You can position it exactly as you do with other flow elements, for example a div. It has default dimensions (300 x 300) but otherwise behaves mostly like a div.

To go on the next line, you may do this :

aaa
<br>
<canvas id=a></canvas>

There are so many possibilities with CSS (the same than with all flow elements) that it'd be hard to list them.

edited Feb 15 '13 at 18:32

answered Feb 15 '13 at 18:04

Denys Séguret

372,613
87
782
758

HTML5 How to make canvas not stretch page?

4 Answers4