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 value for elements which is static positioning, to relative, absolute, or fixed positioning for starters. Once the position property of the canvas is set to something other than static then additional rules like top and left can be used to position the actual canvas element in the container element of the canvas. So then this would not really be a post on canvas alone, but the positioning of HTML elements in general if that is what is meant by canvas position.
However there are some other topics that come to mind as well when it comes to what canvas position might mean. 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. That is having an object that is acting like a display object of sorts, and now to go about positioning that inside the canvas relative to an abstract map of some kind. For the most part a lot of this is simple, but sometimes these sort of things can lead to a time consuming rabbit hole when working out the code for a canvas project.
So then in this post I will be covering some topics when it comes to canvas position topics. That is positioning the canvas itself, getting the canvas rather than window relative position of pointer event objects, and how to go about positioning things inside a canvas element.
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. So then the position css property is not a property that is exclusive to canvas elements alone, but other html elements like divs, images, and just about any other html element that will be displayed in the page for that matter.
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 for this kind of topic. So with that said one way to set canvas position with css is with inline css rules by way of the style attribute of the hard coded canvas element.
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 typical 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 from what would otherwise be the normal default static position with rules like top and left. Absolute positioning breaks the element free from the normal flow of rendering and now positioning happens relative to the parent element that contains the element, and just like with relative positioning properties like top and left can be used. Fixed positioning is also like absolute positioning, but the element can become fixed to the browser window rather than the content of the page, and will remain so even when the user scrolls threw the content of the page.
So for this example I have a positionCanvas method that will be called once for starters when the example starts for the first time. However in addition to this the method will also be called each time the window resizes by attaching the positionCanvas method as an event handler callback for the resize event. This resize event is attached to the window object by way of calling the add event listener method off of the window object, passing resize as the first argument, and then the reference to my positionCanvas method.
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. I have wrote a whole other post on this topic of canvas relative mouse position, that post might be a better read when it comes to getting into this topic in detail. However I will be touching base on the basic of this one here.
The canvas element relative position of a mouse click, touch start, or similar event can be obtained with the use of the getBoundingCLientRect method of the event target element which in this case out be the canvas element. 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, or the equivalent object properties than can be from in touch event arrays, to a canvas relative position.
Something like this might be a good example of that when it just comes to mouse events at least.
I do not care to get to deep into this topic here, as I have wrote another posts on this topic where I did that. However maybe it is still called for to go over some addtional examples of this before moving on.
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.