Answer 1

First it might be easier to keep separation of JS, HTML, and CSS files. That improves the insight to the code.

Secondly, what do you mean by 'improve the movement of the character'?

Thirdly, sure you just have to optimize collision detection between your letter and the objects.

Fourthly, commenting your code improves comprehensibility for others and yourself. I also discovered for myself that I find rarely but sometimes logical errors in my code, just by commenting. The reason for this is that you have to think about how to seperate your code in logical parts for a good documentation/explanation.

As my last point I recommend Processing (https://processing.org/) and Daniel Shiffman's Coding Train (https://www.youtube.com/user/shiffman) for further interests in this. Especially the coding train could help you finding the solutions by your own. Which is the most important lecture in programming. The goal sometimes is not only to find a good solution for your issue. Sometimes it's better to learn how to decide, that some solutions will not work on your issue and how you can convert your issue to another, which already has good solutions.

I hope even without help on coding, that this answer can satisfy you. Because I think you will find the solution on your own. Especially with the above mentioned resources.

Answer 2

It would simplify everything if you link your code here.

Answer 3

You could start rendering your canvas to improve update mechanisms for your canvas. And yes, you can use images in canvases.

Here is an example for rendering an animation:
http://codetheory.in/rendering-animations-with-moving-objects-on-canvas/

If you get stuck try looking for code snippets on 'Stack overflow' or searching in the web.