HTML5 Canvas Set Top/Left
Question
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.
4 answers
solution1
1 2019-02-27 04:07:12
请尝试canvas.style.top =“ 80px”;
solution2
1 2019-02-27 04:15:03
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 eg 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
topdepends on how the element is positioned (ie, the value of thepositionproperty):
- When
positionis set toabsoluteorfixed, thetopproperty specifies the distance between the element's top edge and the top edge of its containing block. (Containing block needs to have propertyposition: relative)- When
positionis set torelative, thetopproperty specifies the distance the element's top edge is moved below its normal position.- When
positionis set tosticky, thetopproperty behaves like itspositionisrelativewhen the element is inside the viewport, and like itspositionisfixedwhen it is outside.- When
positionis set tostatic, thetopproperty has no effect .
solution3
0 2019-02-27 04:27:16
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>
solution4
0 2019-02-27 14:58:29
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.