<canvas width="600" height="400"></canvas>
<script>
var pantalla = document.querySelector('canvas');
var pincel = pantalla.getContext('2d');
// Fondo blanco
pincel.fillStyle = 'white';
pincel.fillRect(0, 0, 600, 400);
// Franja celeste superior
pincel.fillStyle = 'lightblue';
pincel.fillRect(0, 0, 600, 125);
// Franja celeste inferior
pincel.fillStyle = 'lightblue';
pincel.fillRect(0, 275, 600, 125);
// Sol
pincel.beginPath();
pincel.arc(300, 200, 50, 0, 2 * Math.PI);
pincel.fillStyle = 'yellow';
pincel.fill();
</script>