So here is my final piece after much time and hard work on it. It is simple but effective! context.rect(0, 0, 800, 350); // add linear gradient var grd = context.createLinearGradient(0, 0, 800, 350); // light blue grd.addColorStop(1, '#8ED6FF'); // dark blue grd.addColorStop(0, '#004CB3'); context.fillStyle = grd; context.fill(); context.beginPath(); //telling dw we are creating a closed shape context.moveTo(350,50); //this tells dw the starting point of a shape context.lineTo(100,150); //termination of the first line context.lineTo(600, 150); //creates a second line context.closePath(); //draws the closed shape (this is all about drawing by numbers) context.fillStyle = 'brown'; context.fill(); context.lineWidth = 7; context.strokeStyle = 'brown' context.stroke(); context.beginPath(); context.rect(0, 350, 800, 350); context.fillStyle