Sunset animation in a canvas I'm new to JavaScript, and wrote this little animation in canvas. I'm wondering if anyone has any suggestions as for how to improve it.

When running the code, the JavaScript draws a scene of three pyramids, a sun, and a sky. The sun and gradient of the sky animate over time.

The code is working perfectly, but I would like to improve it and make it more efficient.



//render the canvas at 2x dpi
var canvas = document.getElementById('myCanvas');
canvas.width = 1920;
canvas.height = 816;
canvas.style.width = "960px";
canvas.style.height = "408px";
//rescale the grid system for 2xdpi
var ctx = canvas.getContext('2d');
ctx.scale(2, 2);

//start drawing the scene
var canvasElement = document.querySelector("#myCanvas");
var ctx = canvasElement.getContext("2d");

var skyY = 100;
var skyYDirection = 1;

function drawsky() {
    //generate the sky gradient
    var sky = ctx.createLinearGradient(0, skyY, 0, 0);
    sky.addColorStop(0, "#a7bde0");
    sky.addColorStop(1, "#3c68b1");
    
    //draw the sky
    ctx.fillStyle = sky;
    ctx.fillRect(0, 0, 960, 408);
}

function animateSky() {
    //animate the sky
    skyY += skyYDirection;
}

function drawground() {
    //draw the ground
    ctx.fillStyle = "#e9bf83";
    ctx.fillRect(0, 297, 960, 111);
}

function drawpyr1() {
    //draw pyramid1
    //walla
    ctx.beginPath();
    ctx.moveTo(516, 297);
    ctx.lineTo(595, 297);
    ctx.lineTo(632, 182);
    ctx.closePath();
    //fill
    ctx.fillStyle = "#3b230b";
    ctx.fill();
    //wallb
    ctx.beginPath();
    ctx.moveTo(595, 297);
    ctx.lineTo(764, 297);
    ctx.lineTo(632, 182);
    ctx.closePath();
    //fill
    ctx.fillStyle = "#d49c5f";
    ctx.fill();
}

function drawpyr2() {
    //draw pyramid2
    //walla
    ctx.beginPath();
    ctx.moveTo(322, 297);
    ctx.lineTo(410, 297);
    ctx.lineTo(497, 100);
    ctx.closePath();
    //fill
    ctx.fillStyle = "#3b230b";
    ctx.fill();
    //wallb
    ctx.beginPath();
    ctx.moveTo(410, 297);
    ctx.lineTo(695, 297);
    ctx.lineTo(497, 100);
    ctx.closePath();
    //fill
    ctx.fillStyle = "#d49c5f";
    ctx.fill();
}

function drawpyr3() {
    //draw pyramid3
    //walla
    ctx.beginPath();
    ctx.moveTo(179, 297);
    ctx.lineTo(245, 297);
    ctx.lineTo(324, 122);
    ctx.closePath();
    //fill
    ctx.fillStyle = "#3b230b";
    ctx.fill();
    //wallb
    ctx.beginPath();
    ctx.moveTo(245, 297);
    ctx.lineTo(541, 297);
    ctx.lineTo(324, 122);
    ctx.closePath();
    //fill
    ctx.fillStyle = "#d49c5f";
    ctx.fill();
}

function clearCanvas() {
    //clear the canvas
    ctx.clearRect(0, 0, 960, 408);
}

function drawsun(x, y) {
    //draw the sun
    ctx.beginPath();
    ctx.arc(x, y, 80, 0, 2 * Math.PI, false);
    ctx.fillStyle = "#fff1dc";
    ctx.fill();
}

var sunX = 700;
var sunY = 100;
var xDirection = -1;
var yDirection = 0.2;

function animateSun() {
    //animate the sun
    sunX += xDirection;
    sunY += yDirection;
}

//render the scene

function render() {
    //clear canvas
    clearCanvas();

    //layer / animate objs
    drawsky();
    animateSky();
    drawsun(sunX, sunY);
    animateSun();
    drawground();
    drawpyr1();
    drawpyr2();
    drawpyr3();

    //loop the render process
    window.requestAnimationFrame(render);
}

render();
/*nightfall*/

@keyframes nightfall {
    from {
        filter: brightness(1);
    }
    to {
        filter: brightness(0);
    }
}

canvas {
    animation: nightfall 20s forwards cubic-bezier(0.730, 0.010, 1.000, 0.300);
}
&lt;html&gt;
&lt;body&gt;
    &lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;
    &lt;script src="js/script.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
Just some random tips in no particular order.


Consistency in naming: keep using camelCase.
(drawsun -&gt; drawSun, drawpyrX -&gt; drawPyrX, walla -&gt; wallA, ...)
Redundance in declaring and inconsistent use of " and '.



var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var canvasElement = document.querySelector("#myCanvas");
var ctx = canvasElement.getContext("2d");




Put all variables to the top and use const for the ones you dont want to change. This makes changes easier and safer, because you cant change the constants by accident.



var sunX = 700;
var sunY = 100;
const xDirection = -1;
const yDirection = 0.2;