How to move an element with arrows?

Question

JavaScript

The question is. There is a block, for example a machine. You need to move it with the arrows, just moving in a straight line (vertically and horizontally) is not a problem. How to make it drive only in front, that is, the up arrow moves in the direction of the hood, down - reverse, turn the car left and right, but taking into account that I hold the up key or vice versa reverse. I hope I explained clearly.
Interested in how difficult it is to finish it in JS, or is it still easier to use canvas, although I don’t quite understand it yet?
Thank you!

Answer 1

I threw an example, add it so that the turn depends on the speed so that when the speed is higher it is smoother, and the lower the slower, and now the turn is relative to the middle of the car, but it should be relative to the rear wheels if it turns the front, you need to shift drawRect not to the center of the car, but to rear wheels.