How can I move an object with Javascript?

I created a Canvas with Javascript. I created a car with Javascript objects with like rectangles, circles etc. My question is how can I let a object move so it looks like the car is riding.

I already tried some things with what I found on Google but I can't figure it out.

I’m still learning new things in Javascript, thank you in advance for the help!

var canvasEl = document.createElement('canvas');
canvasEl.setAttribute('width', 1535);
canvasEl.setAttribute('height', 720);
 
var context = canvasEl.getContext('2d');
 
function circle(x, y){
    context.arc(x,y,30,0,2*Math.PI);
}
 
function circleCloud(x, y) {
    context.arc(x,y,30,0,2*Math.PI);
    context.fillStyle = "white";
    context.fill();
}
 
function sunBeam(x, y, s, e) {
    context.moveTo(x,y);
    context.lineTo(s,e);
    context.strokeStyle = 'rgba(252, 212, 64)';
    context.lineWidth = 4;
    context.stroke();
}
 
var body = document.querySelector('body');
 
body.appendChild(canvasEl);
 
 
var x = 0;
context.beginPath();
context.fillStyle = 'rgba(50, 150, 200, .7)';
context.fillRect(x,0,1535,250);
context.closePath();
 
context.beginPath();
context.fillStyle = "green";
context.fillRect(0,250,1535,250);
context.closePath();
 
context.beginPath();
context.fillStyle = "green";
context.fillRect(0,600,1535,130);
context.closePath();
 
 
context.beginPath();
context.fillStyle = "Lightblue";
context.fillRect(900,480,130,50);
context.lineWidth = 3;
context.strokeRect(900,480,130,50);
context.strokeStyle = "black";
context.stroke();
context.closePath();
 
 
context.beginPath();
context.fillStyle = "Blue";
context.fillRect(1030,440,70,90);
context.lineWidth = 3;
context.strokeRect(1030,440,70,90);
context.strokeStyle = "black";
context.stroke();
context.closePath();
 
 
context.beginPath();
context.fillStyle = "White";
context.fillRect(1070,460,30,20);
context.lineWidth = 3;
context.strokeRect(1070,460,30,20);
context.strokeStyle = "black";
context.stroke();
context.closePath();
 
 
context.beginPath();
context.arc(925,540,20,0,2*Math.PI);
context.fillStyle = "Gold";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
context.closePath();
 
 
context.beginPath();
context.arc(1040,540,20,0,2*Math.PI);
context.fillStyle = "Gold";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "Black";
context.stroke();
context.closePath();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
 
<script src="js/main.js"></script>
</body>
</html>

Solution

You need to start by using variables on the position of the truck ...
I see you started with: var x = 0; but not really used much on the truck

Then we move using a setInterval, inside the loop we do a few things:

increase the x position
clear the entire canvas
draw the object or objects

var canvasEl = document.createElement('canvas');
canvasEl.setAttribute('width', 800);
canvasEl.setAttribute('height', 160);
var context = canvasEl.getContext('2d');
var body = document.querySelector('body');
body.appendChild(canvasEl);

var x = 0;
var y = 60;

drawTruck();
setInterval(function() {
  x++;
  context.clearRect(0, 0, 800, 160);
  drawTruck();
}, 80);

function drawTruck() {
  context.beginPath();
  context.fillStyle = "Lightblue";
  context.fillRect(x, y, 130, 50);
  context.lineWidth = 3;
  context.strokeRect(x, y, 130, 50);
  context.strokeStyle = "black";
  context.stroke();
  context.closePath();

  context.beginPath();
  context.fillStyle = "Blue";
  context.fillRect(x + 130, y - 40, 70, 90);
  context.lineWidth = 3;
  context.strokeRect(x + 130, y - 40, 70, 90);
  context.stroke();
  context.closePath();

  context.beginPath();
  context.fillStyle = "White";
  context.fillRect(x + 170, y - 20, 30, 20);
  context.lineWidth = 3;
  context.strokeRect(x + 170, y - 20, 30, 20);
  context.stroke();
  context.closePath();

  context.beginPath();
  context.arc(x + 25, y + 60, 20, 0, 2 * Math.PI);
  context.fillStyle = "Gold";
  context.fill();
  context.lineWidth = 5;
  context.stroke();
  context.closePath();

  context.beginPath();
  context.arc(x + 140, y + 60, 20, 0, 2 * Math.PI);
  context.fill();
  context.stroke();
  context.closePath();

  context.beginPath();
  context.arc(x + 140 + Math.cos(x) * 8, y + 60 + Math.sin(x) * 8, 6, 0, 2 * Math.PI);
  context.stroke();
  context.closePath();
}

I added a small animation to the front wheel to simulate rotation while the truck moves forward, just some basic math to make a circle spin inside the wheel