How can I move a car in my Javascript Canvas?

1

Hello, I created a Canvas with Javascript. I created a car with Javascript objects like rectangles, circles etc. Also I created a landscape. I never worked with the Canvas before, I’m still learning new things.

My next step is that the car will ride on the white road automatic. I already tried some things with arc, translate, rotate etc but I can’t figure it out.

index.html

<!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>

main.js

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();
circle(1300, 60);
context.fillStyle = 'rgba(252, 212, 64)';
context.fill();
context.closePath();


context.beginPath();
circleCloud(220, 70);
context.closePath();

context.beginPath();
circleCloud(235, 90);
context.closePath();

context.beginPath();
circleCloud(250, 80);
context.closePath();

context.beginPath();
circleCloud(265, 70);
context.closePath();

context.beginPath();
circleCloud(280, 90);
context.closePath();


context.beginPath();
circleCloud(600, 50);
context.closePath();

context.beginPath();
circleCloud(645, 50);
context.closePath();

context.beginPath();
circleCloud(665, 80);
context.closePath();

context.beginPath();
circleCloud(620, 80);
context.closePath();


context.beginPath();
circleCloud(950, 90);
context.closePath();

context.beginPath();
circleCloud(995, 80);
context.closePath();

context.beginPath();
circleCloud(965, 120);
context.closePath();

context.beginPath();
circleCloud(1010, 120);
context.closePath();



context.beginPath();
sunBeam(1300, 90, 1300, 120);
context.closePath();

context.beginPath();
sunBeam(1300, 0, 1300, 40);
context.closePath();

context.beginPath();
sunBeam(1235, 60, 1273, 60);
context.closePath();

context.beginPath();
sunBeam(1300, 60, 1370, 60);
context.closePath();

context.beginPath();
sunBeam(1230,0, 1375,125);
context.closePath();


context.beginPath();
context.fillStyle = "Sienna";
context.fillRect(300,250,250,200);
context.strokeRect(300,250,250,200);
context.strokeStyle = "Green";
context.stroke();
context.closePath();

context.beginPath();
context.fillStyle = "Red";
context.moveTo(300, 250);
context.lineTo(425, 150);
context.lineTo(550, 250);
context.fill();
context.lineWidth = 3;
context.strokeStyle = "black";
context.stroke();
context.closePath();

context.beginPath();
context.fillStyle = 'rgb(101, 67, 33)';
context.fillRect(340,300,90,150);
context.strokeRect(340,300,90,150);
context.strokeStyle = "black";
context.stroke();
context.closePath();

context.beginPath();
context.fillStyle = "White";
context.fillRect(470,300,50,50);
context.lineWidth = 3;
context.strokeRect(470,300,50,50);
context.strokeStyle = "black";
context.stroke();
context.closePath();

context.beginPath();
context.fillStyle = "Brown";
context.moveTo(800, 450);
context.lineTo(825, 200);
context.lineTo(850, 450);
context.lineWidth = 3;
context.strokeStyle = "black";
context.stroke();
context.fill();
context.closePath();


context.beginPath();
context.arc(825,180,50,0,2*Math.PI);
context.fillStyle = "Green";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "black";
context.stroke();
context.closePath();

/*
Here starts the code for the car
*/

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();

I hope someone can help me out and let the car ride. Thanks for the effort!

2

Hi

main.js

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();
circle(1300, 60);
context.fillStyle = 'rgba(252, 212, 64)';
context.fill();
context.closePath();


context.beginPath();
circleCloud(220, 70);
context.closePath();

context.beginPath();
circleCloud(235, 90);
context.closePath();

context.beginPath();
circleCloud(250, 80);
context.closePath();

context.beginPath();
circleCloud(265, 70);
context.closePath();

context.beginPath();
circleCloud(280, 90);
context.closePath();


context.beginPath();
circleCloud(600, 50);
context.closePath();

context.beginPath();
circleCloud(645, 50);
context.closePath();

context.beginPath();
circleCloud(665, 80);
context.closePath();

context.beginPath();
circleCloud(620, 80);
context.closePath();


context.beginPath();
circleCloud(950, 90);
context.closePath();

context.beginPath();
circleCloud(995, 80);
context.closePath();

context.beginPath();
circleCloud(965, 120);
context.closePath();

context.beginPath();
circleCloud(1010, 120);
context.closePath();



context.beginPath();
sunBeam(1300, 90, 1300, 120);
context.closePath();

context.beginPath();
sunBeam(1300, 0, 1300, 40);
context.closePath();

context.beginPath();
sunBeam(1235, 60, 1273, 60);
context.closePath();

context.beginPath();
sunBeam(1300, 60, 1370, 60);
context.closePath();

context.beginPath();
sunBeam(1230,0, 1375,125);
context.closePath();


context.beginPath();
context.fillStyle = "Sienna";
context.fillRect(300,250,250,200);
context.strokeRect(300,250,250,200);
context.strokeStyle = "Green";
context.stroke();
context.closePath();

context.beginPath();
context.fillStyle = "Red";
context.moveTo(300, 250);
context.lineTo(425, 150);
context.lineTo(550, 250);
context.fill();
context.lineWidth = 3;
context.strokeStyle = "black";
context.stroke();
context.closePath();

context.beginPath();
context.fillStyle = 'rgb(101, 67, 33)';
context.fillRect(340,300,90,150);
context.strokeRect(340,300,90,150);
context.strokeStyle = "black";
context.stroke();
context.closePath();

context.beginPath();
context.fillStyle = "White";
context.fillRect(470,300,50,50);
context.lineWidth = 3;
context.strokeRect(470,300,50,50);
context.strokeStyle = "black";
context.stroke();
context.closePath();

context.beginPath();
context.fillStyle = "Brown";
context.moveTo(800, 450);
context.lineTo(825, 200);
context.lineTo(850, 450);
context.lineWidth = 3;
context.strokeStyle = "black";
context.stroke();
context.fill();
context.closePath();


context.beginPath();
context.arc(825,180,50,0,2*Math.PI);
context.fillStyle = "Green";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "black";
context.stroke();
context.closePath();

/*
Here starts the code for drawing and moving the car
*/
function drawTheCar(x, y) { 

  let coord = {rect1: [x, y],
               rect2: [x+130,y-40],
               whiteRect: [x+170, y-20],
               wheel1: [x+25, y+60],
               wheel2: [x+140, y+60]
                     };
                     
context.beginPath();
context.fillStyle = "Lightblue";
context.fillRect(coord.rect1[0],coord.rect1[1],130,50);
context.lineWidth = 3;
context.strokeRect(coord.rect1[0],coord.rect1[1],130,50);
context.strokeStyle = "black";
context.stroke();
context.closePath();


context.beginPath();
context.fillStyle = "Blue";
context.fillRect(coord.rect2[0],coord.rect2[1],70,90);
context.lineWidth = 3;
context.strokeRect(coord.rect2[0],coord.rect2[1],70,90);
context.strokeStyle = "black";
context.stroke();
context.closePath();


context.beginPath();
context.fillStyle = "White";
context.fillRect(coord.whiteRect[0],coord.whiteRect[1],30,20);
context.lineWidth = 3;
context.strokeRect(coord.whiteRect[0],coord.whiteRect[1],30,20);
context.strokeStyle = "black";
context.stroke();
context.closePath();


context.beginPath();
context.arc(coord.wheel1[0],coord.wheel1[1],20,0,2*Math.PI);
context.fillStyle = "Gold";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
context.closePath();


context.beginPath();
context.arc(coord.wheel2[0],coord.wheel2[1],20,0,2*Math.PI);
context.fillStyle = "Gold";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "Black";
context.stroke();
context.closePath();
}
let xStart = 0 ;
function moveTheCar() {
   xStart = (xStart + 10 )  % 1535 ;
    let y = 547 ;
    context.clearRect(0, 500, 1535, 130);
    drawTheCar(xStart, y);

}
setInterval(moveTheCar,80);
3

Thank you for helping me!

4

You are welcome :slight_smile: