How to send MouseEvent Location in JS?

I'm planning to write a chess-engine cheating chrome extension and I'd love if it could move the pieces automatically (without having to reverse-engineer the move packets they send out). The issue is they have some sort of special element arrangement that makes it difficult.

The board looks like this (with only one pawn):

<div id="chessboard_boardarea" style="position: relative; margin: 0px; padding: 0px; background: url(&quot;//images.chesscomfiles.com/chess-themes/boards/brown/40.png&quot;) 0% 0% / 100% 100%; border: none; border-radius: 4px; width: 160px; height: 160px;">
   <img class="chess_com_piece chess_com_draggable" src="//images.chesscomfiles.com/chess-themes/pieces/classic/40/wp.png" width="20" height="20" style="position: absolute; margin: 0px; padding: 0px; display: block; overflow: hidden; opacity: 1; width: 20px; height: 20px; z-index: 11; transform: translate(80px, 120px);">
</div>

Using this MouseEvent example, I am able to select a piece as such:

var dispatchMouseEvent = function(target, var_args) {
    var e = document.createEvent("MouseEvents");
    e.initEvent.apply(e, Array.prototype.slice.call(arguments, 1));
    target.dispatchEvent(e);
 };
 var board = document.getElementByID("chessboard_boardarea");
 var pawn = board.children[0];
 dispatchMouseEvent(pawn, 'mousedown');
 dispatchMouseEvent(pawn, 'mouseup');

But now to click somewhere else on the board I tried stuff like (where 20, 20 = clientx, clienty):

 var dispatchMouseEvent = function(target, var_args) {
    var e = document.createEvent("MouseEvents");
    e.initMouseEvent.apply(e, Array.prototype.slice.call(arguments, 1));
    target.dispatchEvent(e);
 };
dispatchMouseEvent(board, "mousedown", true, true, window, 0, 0, 0, 20, 20, false, false, false, false, 0, null);
dispatchMouseEvent(board, "mouseup", true, true, window, 0, 0, 0, 20, 20, false, false, false, false, 0, null);

This does nothing. Any ideas what I should be doing or at least how to debug this?