How to change website background colour with the seasons in javascript

JAVASCRIPT
// JavaScript Document

function getMonthString(num)
{

var month;
switch(num)
{
case 0:
month="January";
break;
case 1:
month="February";
break;
case 2:
month="March";
break;
case 3:
month="April";
break;
case 4:
month="May";
break;
case 5:
month="June";
break;
case 6:
month="July";
break;
case 7:
month="August";
break;
case 8:
month="September";
break;
case 9:
month="October";
break;
case 10:
month="November";
break;
case 11:
month="December";
break;
default:
month="Invalid month";
}
return month;
}
theDate = new Date();
/*document.write("The month is ",getMonthString(theDate.getMonth()));*/

function setSeason()
{

if(month = December || January || February)
{
window.onload = drawWinter;
}

}

/*window.onload = drawWinter;*/
window.onload = drawSpring;
/*window.onload = drawSummer;
window.onload = drawAutumn;*/

function drawSpring()
{
var canvas = document.getElementById('spring');
var context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context.fillRect(10,10,100,150);
var mygradient = context.createLinearGradient(0,0,0,canvas.height);
mygradient.addColorStop(0,'#01d6c4');
mygradient.addColorStop(1,'#189c0a');
context.fillStyle = mygradient;
context.fillRect(0,0,canvas.width,canvas.height);
}

function drawSummer()
{
var canvas = document.getElementById('summer');
var context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context.fillRect(10,10,100,150);
var mygradient = context.createLinearGradient(0,0,0,canvas.height);
mygradient.addColorStop(0,'#33ccff');
mygradient.addColorStop(1,'#95d2a9');
context.fillStyle = mygradient;
context.fillRect(0,0,canvas.width,canvas.height);
}

function drawAutumn()
{
var canvas = document.getElementById('autumn');
var context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context.fillRect(10,10,100,150);
var mygradient = context.createLinearGradient(0,0,0,canvas.height);
mygradient.addColorStop(0,'#993300');
mygradient.addColorStop(1,'#ff3300');
context.fillStyle = mygradient;
context.fillRect(0,0,canvas.width,canvas.height);
}

function drawWinter()
{
var canvas = document.getElementById('winter');
var context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context.fillRect(10,10,100,150);
var mygradient = context.createLinearGradient(0,0,0,canvas.height);
mygradient.addColorStop(0,'#ccccff');
mygradient.addColorStop(1,'#ffffff');
context.fillStyle = mygradient;
context.fillRect(0,0,canvas.width,canvas.height);
}

function drawCloud()
{
var canvas = document.getElementById('cloud');
var context = canvas.getContext('2d');
var piccount = 1;
var x = 1;
var y = 1;
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight;
var img = new Image();
img.src = 'image/autumn_cloud.gif';

img.onload = function()
{
context.drawImage(img,0,0);
setInterval(draw,50);
}

function draw()
{
x=x+2;
context.clearRect(0,0,context.canvas.width,context.canvas.height);
context.drawImage(img,x,0);
}
}

HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Seasons</title>
<link href="css/coursework.css" rel="stylesheet" type="text/css">
<script src="scripts/coursework.js"></script>
</head>
<body onLoad="setSeason()">
<canvas> Your Browser does not support canvases</canvas>
</body>
</html>

CSS
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
canvas {
display:block;
}

MY ISSUE IS I NEED FOR THE BACKGROUND TO CHANGE WITH THE CORRESPONDING SEASONS AS I HAVE DEFINED IN 4 FUNCTIONS AND ALSO I HAVE CREATED A CLOUD ANIMATION TO INCORPORATE INSIDE THE CANVAS. HOW DO I GET EH BACKGROUND TO CHANGE AND ALSO HOW TO I INCLUDE BOTHER THE BACKGROUND AND THE CLOUD ON THE SAME CANVAS IN HTML5

thanks for any responses.....