admin管理员组

文章数量:1404615

I can easily set the canvas.width and canvas.height properties. I cannot find the right JavaScript syntax to set the offset of the canvas using top and left. I have tried setting these properties on the canvas directly and on the bounding rectangle.

I would like to be able to set the top and left offset so that I can reposition the canvas when a user clicks on a point.

If canvas.width = 600 works just fine; why doesn't canvas.top = 80 work? I am confused. Thx for your help.

I can easily set the canvas.width and canvas.height properties. I cannot find the right JavaScript syntax to set the offset of the canvas using top and left. I have tried setting these properties on the canvas directly and on the bounding rectangle.

I would like to be able to set the top and left offset so that I can reposition the canvas when a user clicks on a point.

If canvas.width = 600 works just fine; why doesn't canvas.top = 80 work? I am confused. Thx for your help.

  • javascript
  • html5-canvas
Share Improve this question edited Feb 27, 2019 at 4:47 004123 2701 silver badge12 bronze badges asked Feb 27, 2019 at 3:18 user2782user2782 4881 gold badge5 silver badges19 bronze badges 2
  • 1 Possible for you to recreate the problem you are having in a working demo please. Thank you. – NewToJS Commented Feb 27, 2019 at 3:21
  • canvas.top is nothing. The canvas element does not have an attribute by that name. Are you talking about CSS? – Mike 'Pomax' Kamermans Commented Sep 8, 2023 at 3:41
Add a ment  | 

5 Answers 5

Reset to default 2

In order to set the top position of the canvas, you need to wrap the canvas inside of another div with absolute positioning. Then set the position of the canvas to be relative to its wrapping div. Finally, you can set the style of the canvas.

Make sure you provide units e.g. px, em, rem, %, etc...

var panel = document.getElementById('panel');

panel.width = 600;
panel.height = 200;
panel.style.top = '80px'; // Must specify unit.
.container {
  position: absolute;
  background: #0FF;
}

#panel {
  position: relative;
  background: #F00;
}
<div class="container">
  <canvas id="panel"></canvas>
</div>

The docs state:

The effect of top depends on how the element is positioned (i.e., the value of the position property):

  • When position is set to absolute or fixed, the top property specifies the distance between the element's top edge and the top edge of its containing block. (Containing block needs to have property position: relative)
  • When position is set to relative, the top property specifies the distance the element's top edge is moved below its normal position.
  • When position is set to sticky, the top property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
  • When position is set to static, the top property has no effect.

Please try canvas.style.top = "80px";

Make sure you have set position to relative or absolute. Have Look at the example below.

<!DOCTYPE html>
<html>

<body>

  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;top: 80px; position: absolute;">
Your browser does not support the HTML5 canvas tag.</canvas>

  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 100);
    ctx.stroke();
  </script>

</body>

</html>

In short, width and height are html attributes and can therefore be set using element.width and element.height. However, top is a css proberty, not an html attribute - therefore it can only be set using element.style.top.

Also, as already pointed out in the other answers, the css position proberty has to be either fixed or absolute in order for top and left to work.

CSS

canvas{
    position: absolute;
    top: 80px;
}

JS

const canvas = document.querySelector("canvas");
canvas.style.position = "absolute";
canvas.style.top = "80";

本文标签： javascriptHTML5 Canvas Set TopLeftStack Overflow

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