Gen and set Canvas position, and canvas relative values

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 then in this post I will be covering some topics when it comes to canvas position related topics.

1 - Canvas position using css rules

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<title>canvas position relative</title>
</head>
<body>
<div style="position:relative;top:100px;">
<canvas id="the-canvas" width="320" height="240" style="position:relative; left:50px;"></canvas>
</div>
<script>
var canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
ctx.fillStyle='black';
ctx.fillRect(0,0,canvas.width,canvas.height);
</script>
</body>
</html>

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.

2 - Canvas position on resize

Another canvas position topic might be to position the canvas when the window is resized. This can be done with the resize window event and a simple callback function that positions the canvas with the style api. The style api is one way to go about setting css rules with javaScript, so it is a way that the canvas can be resized, and positioned by way of some kind of event or condition with javaScript rather than static css rules.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
<title>canvas position resize</title>
</head>
<body>
<canvas id="the-canvas"></canvas>
<script>
// get canvas, set native size
var canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
canvas.width = 320;
canvas.height = 240;
// position canvas method
var positionCanvas = function(){
canvas.style.position = 'absolute';
canvas.style.top = window.innerHeight / 2 - canvas.height / 2 + 'px';
canvas.style.left = window.innerWidth / 2 - canvas.width / 2 + 'px';
};
// attach position canvas method to window resize event
window.addEventListener('resize', positionCanvas);
// call it for the first time
positionCanvas();
// draw
ctx.fillStyle='black';
ctx.fillRect(0,0,canvas.width,canvas.height);
</script>
</body>
</html>

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.

3 - Canvas mouse position

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
<head>
<title>canvas position mouse</title>
</head>
<body>
<canvas
id="the-canvas"
style="position:absolute;left:50px;top:50px;">
</canvas>
<script>
// get canvas, set native size
var canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
canvas.width = 320;
canvas.height = 240;
// get mouse position
var getPos = function(e){
var bx = e.target.getBoundingClientRect(),
x = e.clientX - bx.left,y = e.clientY - bx.top;
console.log(x,y);
}
canvas.addEventListener('mousedown', getPos);
// draw
ctx.fillStyle='black';
ctx.fillRect(0,0,canvas.width,canvas.height);
</script>
</body>
</html>

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.

1
2
3
4
5
6
7
8
9
10
11
var getCanvasRelative = function (e) {
var canvas = e.target,
bx = canvas.getBoundingClientRect();
var x = (e.changedTouches ? e.changedTouches[0].clientX : e.clientX) - bx.left,
y = (e.changedTouches ? e.changedTouches[0].clientY : e.clientY) - bx.top;
return {
x: x,
y: y,
bx: bx
};
};

4 - Center the canvas position

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.

So most solutions that would be used today would involve just some quick css. I is also of course possible to do so with javaScript, but more often than not that might prove to be an over complicated solution to a simple problem. Always start with simple HTML, and CSS first if you can not solve the problem with that then look into javaScript powered solutions.

4.1 - Using the margin auto trick to center a canvas

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<title>canvas center position </title>
</head>
<body>
<canvas
id="the-canvas"
width="320" height="240"
style="display:block;margin-left:auto;margin-right:auto;">
</canvas>
<script>
var canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
ctx.fillStyle='black';
ctx.fillRect(0,0,canvas.width,canvas.height);
</script>
</body>
</html>

4.2 - Using window.innerWidth, height, fixed positioning and javaScript

Another approach to centering a canvas, or any dom element for that matter would be to use javaScript, fixed positioning, and the window inner width and height properties of the window object. This is a way to just get the inner size of the browser window, and then just do the math to set the position of the canvas to the center of the browser window.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
<title>canvas center position </title>
</head>
<body>
<canvas
id="the-canvas"
width="320" height="240",
style="position:fixed;">
</canvas>
<script>
var centerCanvasPosition = function(canvas){
canvas.style.left = window.innerWidth / 2 - canvas.width / 2 + 'px';
canvas.style.top =window.innerHeight / 2 - canvas.height / 2 + 'px';
};
var canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
ctx.fillStyle='black';
ctx.fillRect(0,0,canvas.width,canvas.height);
// center canvas for starters
centerCanvasPosition(canvas);
// and on every resize
window.addEventListener('resize',function(){
centerCanvasPosition(canvas);
});
</script>
</body>
</html>

5 - Conclusion

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.