CODEWITHSUNDEEP
javascripthtmlcsscanvasstretch
H3XXX
H3XXX

Reputation: 647

HTML5 How to make canvas not stretch page?

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.

Upvotes: 0

Views: 873

Answers (4)

Denys Séguret
Denys Séguret

Reputation: 382274

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.

Upvotes: 0

user2076528
user2076528

Reputation:

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;
}

Upvotes: 2

redGREENblue
redGREENblue

Reputation: 3126

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.

Upvotes: 4

Garry
Garry

Reputation: 5074

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

Upvotes: 2

Related Questions