Sunset animation in a canvas
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;