admin管理员组

文章数量:1302940

So I thought that the code

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Log Canvas Width</title>
    <style>
        #canvas {
            background: #888888;
            width: 600px;
            height: 600px;
        }
    </style>
    <script>
        function draw() {
            var canvas = document.getElementById('canvas'),
                         context = canvas.getContext('2d');
            document.write(canvas.width);
        }
    </script>
</head>
<body onload="draw();">
        <canvas id='canvas'>
            Canvas not supported
        </canvas>
</body>
</html>

prints 300 rather than 600 because <body onload="draw();"> makes the script run at page loading, and at that time the canvas has not yet caught the revised value (600).

But then I modify the code to:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Log Canvas Width</title>
    <style>
        #canvas {
            background: #888888;
            width: 600px;
            height: 600px;
        }
    </style>
</head>
<body>
    <canvas id='canvas'>
        Canvas not supported
    </canvas>
    <script type="text/javascript">
        var canvas = document.getElementById('canvas'),
                     context = canvas.getContext('2d');
        document.write(canvas.width);
    </script>
</body>
</html>

Now I'm imagining that the script runs after the canvas has taken the attribute from the embedded style and that I will see 600. Not true. I still get 300, even though the canvas duly has width = 600. What is happening?

So I thought that the code

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Log Canvas Width</title>
    <style>
        #canvas {
            background: #888888;
            width: 600px;
            height: 600px;
        }
    </style>
    <script>
        function draw() {
            var canvas = document.getElementById('canvas'),
                         context = canvas.getContext('2d');
            document.write(canvas.width);
        }
    </script>
</head>
<body onload="draw();">
        <canvas id='canvas'>
            Canvas not supported
        </canvas>
</body>
</html>

prints 300 rather than 600 because <body onload="draw();"> makes the script run at page loading, and at that time the canvas has not yet caught the revised value (600).

But then I modify the code to:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Log Canvas Width</title>
    <style>
        #canvas {
            background: #888888;
            width: 600px;
            height: 600px;
        }
    </style>
</head>
<body>
    <canvas id='canvas'>
        Canvas not supported
    </canvas>
    <script type="text/javascript">
        var canvas = document.getElementById('canvas'),
                     context = canvas.getContext('2d');
        document.write(canvas.width);
    </script>
</body>
</html>

Now I'm imagining that the script runs after the canvas has taken the attribute from the embedded style and that I will see 600. Not true. I still get 300, even though the canvas duly has width = 600. What is happening?

  • javascript
  • html
  • canvas
Share Improve this question asked Feb 11, 2016 at 5:01 CalafCalaf 10.8k15 gold badges60 silver badges127 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 5

Default width of canvas is 300 x 150 [Ref]. Canvas does not consider css defined with. Either you defined width/heigh attributes or assign those values as properties of canvas element.

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
alert(canvas.width);
<canvas id='canvas' width='600'>
  Canvas not supported
</canvas>

OR

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 600;
alert(canvas.width);
<canvas id='canvas'>
  Canvas not supported
</canvas>

canvas.width and canvas.style.width are two different things. In most of the cases, they should be equal, but they can also be different for achieving various effects. 300 you're getting is the canvas default width.

canvas.width is the actual number of pixels that are available inside the canvas, while canvas.style.width is the width of the HTML element, thus you can see stretching, pixelation, etc, if the two numbers are different.

Here are a couple of answers that describe the issue in more detail:

  • https://stackoverflow./a/28142612/965907
  • https://stackoverflow./a/34539170/965907
  • https://stackoverflow./a/28879318/965907

I found that setting the canvas width and height equal to the style width and height helped me with the calculations later. Like:

canvas.width = canvas.getBoundingClientRect().width;
canvas.height = canvas.getBoundingClientRect().height;

本文标签： javascriptIncorrect canvas width valueStack Overflow

版权声明：本文标题：javascript - Incorrect canvas width value - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741717290a2394187.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。