Tilemap with Buildings and Mousemovement, does not work like it should

Hello everybody,

I have only been dealing with canvas for a very short time, thanks to the YouTube “The Coding Train” I became aware of p5js years ago and I am really enthusiastic, it is significantly faster, smaller and easier than pure canvas: D

Here I have a small map, which should include pictures (buildings etc.). The map is passed from PHP to Javascript.

I now have 2 problems that I have not been able to control for days, which is why I am looking for help here.

Problem number 1: You can navigate through the map with WASD and the arrow keys, which works quite well in itself. The bigger the map, the more jerky it is, but that’s not so bad if someone has an idea here, just bring it on. : D
Furthermore, you can do the same with the mouse and here you quickly realize that this is not really good, it feels rather wrong, unfortunately I can’t get the problem right. How can I make the natural look?

Problem number 2: I want to be able to add images / buildings etc. on the map. I have now placed a building on coordinates 100/99 (at the bottom right corner) and I want pictures to extend across the individual fields. There will be buildings that are 1x1, 1x2, but also 2x2 and a maximum of 3x3. It would be ideal if I simply had to take the highest point and stretch the image over 3 fields. The alternative would be that I hand this over already split, but I would like to try that first.

Who has an idea and can help me or adjust it right away?

on problem number 2:
Should / Is state:

Best Regards,

use image() function