Smooth jump to js canvas?

Question

Canvas

I can't make a smooth jump, who knows, help a beginner gameDev programmer

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");



let bg = new Image();
bg.src = "https://st2.depositphotos.com/2172301/10601/v/600/depositphotos_106013420-stock-illustration-seamless-cartoon-landscape-with-mountains.jpg";


let cactus = new Image();
cactus.src ="img/cactus.png";

let dog = new Image();
dog.src = "https://cdn2.iconfinder.com/data/icons/japan-flat-2/340/dog_pet_animal_japanese_shiba_inu_japan-256.png";

let dogX = 100;
let dogY = 250;


let pipe = [];
pipe[0] = {
    x:canvas.width,
    y:270
};


function draw(){
    ctx.drawImage(bg,0,0);
    ctx.drawImage(dog,dogX,dogY,100,100);
    for(let i = 0;i<pipe.length;i++){
        ctx.drawImage(cactus,pipe[i].x,pipe[i].y,80,80);
        pipe[i].x -= speed;


        if(pipe[i].x == 300){
            pipe.push({
                x:canvas.width,
                y:270
            });
        }
    }
    
   
      
    requestAnimationFrame(draw);
    
}

function space(){
    dogY -= 85;

    
}


document.addEventListener("keydown",space);



bg.onload = draw;

Answer 1

1. learn how to politely communicate with colleagues: format your code and offer it in a readable form, or better, give a working self-contained example on jsFiddle or CodePen
   
2. read about the method requestAnimationFrame()- what is passed to it as an argument - this will be needed for realistic smoothness on all devices from a fast computer to a weak phone
   
3. remember physics: free fall acceleration
   
4. for smoothness with sudden changes in coordinates (bouncing), you can use the pursuit chain