发表新帖
发表新帖

How to center canvas in html5

后端 未结
关注
9 1463
自闭症患者
自闭症患者 2020-12-12 11:02

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

相关标签:
9条回答
  • 没有蜡笔的小新
    2020-12-12 11:24

    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.

    0 讨论(0)
  • 孤城傲影
    2020-12-12 11:25

    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>

    0 讨论(0)
  • 没有蜡笔的小新
    2020-12-12 11:27

    You can give your canvas the ff CSS properties:

    #myCanvas
{
    display: block;
    margin: 0 auto;
}
    0 讨论(0)
  • 攒了一身酷
    2020-12-12 11:30

    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

    0 讨论(0)
  • Happy的楠姐
    2020-12-12 11:30

    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>
    0 讨论(0)
  • 天命终不由人
    2020-12-12 11:33

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题