How to center canvas in html5

Question

I've been searching for a solution for a while now, but haven't found anything. Maybe it's just my search terms. Well, I'm trying to make the canvas center according to the size of the browser window. The canvas is 800x600. And if the window gets below 800x600, it should resize as well(but that's not very important at the moment)

How do I tell it to make a full page canvas without giving dimensions and without having scrollbars when resizing? — jorgen, Feb 26 '11 at 16:07
Don't do it in HTML .. do it with javascript, use stuff like appendChild or something and set width and height to window.innerWidth and window.innerHeight — the JinX, Feb 26 '11 at 16:11

Marco Luglio · Answer 1 · 2015-07-10T04:05:18.280

Give the canvas the following css style properties:

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 800px;
}

Edit

Since this answer is quite popular, let me add a little bit more details.

The above properties will horizontally center the canvas, div or whatever other node you have relative to it's parent. There is no need to change the top or bottom margins and paddings. You specify a width and let the browser fill the remaining space with the auto margins.

However, if you want to type less, you could use whatever css shorthand properties you wish, such as

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
}

Centering the canvas vertically requires a different approach however. You need to use absolute positioning, and specify both the width and the height. Then set the left, right, top and bottom properties to 0 and let the browser fill the remaining space with the auto margins.

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
    height: 600px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

The canvas will center itself based on the first parent element that has position set to relative or absolute, or the body if none is found.

Another approach would be to use display: flex, that is available in IE11

Also, make sure you use a recent doctype such as xhtml or html 5.

display: block; and margin:0 auto 0 auto; is enough also. Thx! — Chris, Nov 07 '14 at 16:31
For vertically centering a canvas, you don't need to put the width and the height in, as long as you specify it in the HTML. On chrome, anyway. — Zac, Jul 02 '16 at 15:09
Width and height can be specified in css or html. But css is the recommended way since all presentation logic should go there. — Marco Luglio, Jul 05 '16 at 01:30
It is centering the canvas but if there is image drawn on the canvas, it is stretching. Can you center the canvas without stretching the image — varad, Sep 27 '16 at 05:37
Setting height and width in inline styles on the canvas element messed up the sizes of my drawn images and such. Just a caveat that will hopefully save someone some frustration. — MrBoJangles, Feb 16 '18 at 04:26

score 57 · Answer 2 · answered Jun 14 '12 at 13:13

57

You can give your canvas the ff CSS properties:

#myCanvas
{
    display: block;
    margin: 0 auto;
}

answered Jun 14 '12 at 13:13

jinmichaelr

883
6
9

Can you provide a jsfiddle? This approach does not appear to work – jose.angel.jimenez May 26 '16 at 07:33
6

This works for horizontal centering, but not vertical centering. – Matty J Jun 29 '17 at 06:16

Konkret · Answer 3 · 2018-11-24T03:52:12.783

To center the canvas element horizontally, you must specify it as a block level and leave its left and right margin properties to the browser:

canvas{
    margin-right: auto;
    margin-left: auto;
    display: block;
}

If you wanted to center it vertically, the canvas element needs to be absolutely positioned:

canvas{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);              
}

If you wanted to center it horizontally and vertically, do:

canvas{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);               
}

For more info visit: https://www.w3.org/Style/Examples/007/center.en.html

score 20 · Answer 4 · answered Mar 15 '11 at 21:44

20

Just center the div in HTML:

  #test {
     width: 100px;
     height:100px;
     margin: 0px auto;
     border: 1px solid red;
   }


<div id="test">
   <canvas width="100" height="100"></canvas>
</div>

Just change the height and width to whatever and you've got a centered div

http://jsfiddle.net/BVghc/2/

answered Mar 15 '11 at 21:44

JoeCianflone

682
4
18

1

Lucky me, I needed this soon after you posted it. :) – mcandre Mar 15 '11 at 23:30
5

This does not work if the canvas is smaller than the container. – SystemicPlural Jun 23 '15 at 08:48

score 13 · Answer 5 · answered Apr 10 '21 at 18:25

You can also use Flexbox, however the canvas element must be inside a div, just applying it to the canvas element will not work.

HTML:

<div class="canvas-container">
    <canvas width="150" height="200"></canvas>
</div>

CSS:

.canvas-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

score 5 · Answer 6 · answered Jun 23 '15 at 09:05

The above answers only work if your canvas is the same width as the container.

This works regardless:

#container {
  width: 100px;
  height:100px;
  border: 1px solid red;
  
  
  margin: 0px auto;
  text-align: center;
}

#canvas {
  border: 1px solid blue;
  width: 50px;
  height: 100px;
  
}

<div id="container">
  <canvas id="canvas" width="100" height="100"></canvas>
</div>

score 5 · Answer 7 · answered Oct 21 '18 at 10:17

5

Add text-align: center; to the parent tag of <canvas>. That's it.

Example:

<div style="text-align: center">
    <canvas width="300" height="300">
        <!--your canvas code -->
    </canvas>
</div>

answered Oct 21 '18 at 10:17

Raj Yadav

9,677
6
35
30

this is simple then using css – Clifton Avil D'Souza Mar 01 '19 at 07:34
simplest and solved my problem as well. best answer in my opinion. – Pam Stums Aug 24 '20 at 19:54

score 3 · Answer 8 · answered Jun 26 '18 at 08:55

Use this code:

<!DOCTYPE html>
<html>
<head>
<style>
.text-center{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
</style>
</head>
<body>

<div class="text-center">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>

</body>
</html>

score 1 · Answer 9 · answered Apr 23 '12 at 12:21

I have had the same problem, as I have pictures with many different widths which I load only with height info. Setting a width allows the browser to stretch and squeeze the picture. I solve the problem by having the text line just before the image_tag line centred (also getting rid of float: left;). I would have liked the text to be left aligned, but this is a minor inconvienence, that I can tolerate.

score 0 · Answer 10 · answered Sep 01 '20 at 00:00

Using grid?

const canvas = document.querySelector('canvas'); 
const ctx = canvas.getContext('2d'); 
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, canvas.width, canvas.height);

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
}

body {
    display: grid;
    grid-template-rows: auto;
    justify-items: center;
    align-items: center;
}

canvas {
  height: 80vh; 
  width: 80vw; 
  display: block;
}

<html>
  <body>
        <canvas></canvas>
  </body>
</html>

How to center canvas in html5

10 Answers10

Linked