Currently, I am developing a simple game in JavaScript that includes a grid and various cells. Here is the current look of the game which functions perfectly. However, I am facing an issue with setting the margin to 0 and wanting to center the canvas instead. In order to achieve this, I extracted the margin value using the following function:
var test = document.querySelector('.test');
var left_margin = window.getComputedStyle(test).getPropertyValue('margin-left');
left_margin = left_margin.match(/\d+/);
After making some adjustments to accommodate this offset, I encountered a problem where adding the offset to the x-axis results in NaN. Despite performing basic mathematical operations on the value, it still returned NaN. Can anyone explain what might be causing this issue? Additionally, is there a straightforward way to redefine the origin for an element, like a canvas, to avoid encountering such problems?
Edit: I recently came across another confusing issue where when I try to initialize a variable 'a' as blockWidth + 0, the game doesn't start. Subsequently, logging 'a' returns NaN, along with an error message (Uncaught TypeError: Cannot set property 'strokeStyle' of undefined).
function grid(){
var a = blockWidth + left_margin;
var b = blockHeight;
while (a != widthWin){
drawLine(a, 0, a, heightWin, 1, 'gray');
a += blockWidth;
}
while (b != heightWin){
drawLine(left_margin, b, widthWin+left_margin, b, 1, 'gray');
b += blockHeight;
}
}