So then canvas position might refer to positioning a canvas element using css style rules with the position property mainly. That means setting the position property to something other than the default for elements which is static positioning, to relative, absolute, or fixed positioning, and then using additional rules like top and left to position the actual canvas element that way. So then this would not really be a post on canvas alone, but the positioning of HTML elements in general.
However there are some other topics that come to mind as well. Such as repositioning a canvas element on a browser window resize, and also how to get a mouse or touch pointer event location relative to the current position of the canvas element rather than the window of the browser.
Then of course there is also positioning things inside a canvas when it comes to drawing things in the canvas such as images, paths, text, and so forth. For the most part a lot of this is simple, but sometimes a lot of it does lead to a time consuming rabbit hole.
So positioning a canvas element with css rules is more of a css topic rather than one that has to do with just canvas elements alone. The position css property is not a property that is exclusive to canvas elements alone, but other html elements like divs, and images. Still it is something that does have to do with the topic of canvas position, and it might prove to be a good starting point. So with that said one way to set canvas position with css is with inline css rules like so.
This above example of course makes use of of relative positioning, but in some situations you might want to use absolute or fixed positioning. I will not be getting into the differences in depth, but those three values for positioning are still the most common and tropical values for the position property. I would say that at least those three should be solid in the mind of a jaavScript developer, when it comes to css positioning.
So for a brief overview static positioning is the default position property for elements where the div can not be moved with rules like top and left. Relative positioning is about the same as static but the element can be moved with rules like top and left. Absolute positioning is about the same as relative positioning but it breaks the element free from the normal flow of rendering and not positioning happens relative to the parent element, rather than that flow.
This is not just an example of canvas position but of canvas scale also. When it comes to canvas scale that is another rabbit hole of sorts, so I have a post on the topic of canvas scale where I have a lot of that worked out.
So another thing about canvas position is how to go about getting the mouse pointer position when clicking on a canvas element. There is a need to get the canvas element relative position of the point that was clicked, or touched, rather than the browser window relative position. So this is another canvas position related topic that will come up now and then when working out a canvas project.
The canvas element relative position of a mouse click, touch start, or similar event can be achieved with the use of the getBoundingCLientRect method. This is a useful method that can be used to get values that can be used to adjust the window relative x and y position that is gained from the e.clientX, and e.clientY properties of a mouse event object to a canvas relative position.
Something like this might be a good example of that when it just comes to mouse events at least.
3.1 - Making A Get canvas relative position helper method that will work with both mouse and touch events
The above example will work fine if I just care about a mouse position, however things work a litter differently when it comes to touch events. So it might be a good idea to have some kind of helper method that can be passed an event object and then return a canvas relative position from a mouse or touch event. This kind of method would use the clientX and clientY properties of the event object of they are there, if not it will make use of the first touch object in the event of a touch event.
A common task that is often encountered when starting to play around with canvas is to find a way to center the canvas in the middle of the browser window. There is a whole lot of ways to go about doing this for a canvas of any element in general really. Way back in the day it was not frowned upon to do so with table elements for example, but now that would likely always be considered poor practice.
One way to center a canvas horizontally at least is the margin auto trick when setting the display css property of the canvas to block.
So the canvas position could refer to a few things, but only so much. The positioning of a canvas is not all that different from that of positioning any other html element when it comes to setting the dom element position. It is a good idea to get up to speed with the differences between the various types of values for the position css property if you have not done so all ready at this point.