coordinates are accurate but:
event.client* behavior isn't actually defined for flexbox (what is the client area?)
therefore you should use absolute coordinates like pageX & pageY and getBoundingClientRect() to calc the relative ones
also you were right, the align-self:center contributed to (but wasn't the only) issue
you are also stretching the canvas, so document:canvas pixel ratio is not 1:1
here's the math:
var actualX = e.pageX - canvas.getBoundingClientRect().left;
var actualY = e.pageY - canvas.getBoundingClientRect().top;
var currentWidth = this.scrollWidth;
var currentHeight = this.scrollHeight;
var the_x = canvas.width * actualX / currentWidth; // a simple proportion
var the_y = canvas.height * actualY / currentHeight;
ctx.arc(the_x, the_y, radius, 0, 2 * Math.PI, false);
and here's the working demo: http://jsfiddle.net/qtkyw/
hth!