Mouse issues when changing index.html

I'm not sure if I'm doing something incorrectly, or if this is a bug. I'm guessing the former, so I'm checking here first. When I export a project to an HTML5 website, and change the index.html file in a way that moves the location of the canvas, the mouse doesn't seem to function correctly. Here's an example. The red box is supposed to always be centered on the Mouse. Both links are pulling from the same runtime file:

Standard index.html

index.html with a couple page breaks, and a border around the canvas

In case it helps, I'm exporting using r112, and testing in Firefox. Here's the capx.

Anyone know what I'm doing wrong, or is this a bug?

The border seems to shift the canvas down and to the right. (Like you'd expect but I don't know why it affects the mouse position) What about adding the border to the div around the canvas instead of the canvas directly. That works and gives the same effect.

Adding the border to the div around the canvas gives me this.

Granted, my css/html knowledge is very limited, so I could be adding it to the div incorrectly.

In your last link, try to provide more space to "c2canvasdiv".

A width of 660 and removing the <br/> in between the two closing </div> should help.

Modifying only the width value in FF worked for me, the square was already well positioned under the mouse, it was only an aesthetic matter of correctly "framing" the div.

You already did most the work, you might still want to check this tutorial to learn more about editing the index.html file.

Sorry I meant adding it to the existing div (id="c2canvasdiv") not creating another div inside.

You should simply style c2canvasdiv - don't add any divs inside it, or style the canvas directly.

Perfect. Thanks everyone!