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

Just some random tips in no particular order.

• Consistency in naming: keep using camelCase.

(drawsun -> drawSun, drawpyrX -> drawPyrX, walla -> 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;

StackExchange Code Review Q#160799, answer score: 3