.JS code

$(document).ready(function() {
    
// First canvas createt
var canvas = document.getElementById("firstCanvas");
var context = canvas.getContext('2d');
var gradient = context.createLinearGradient(0,0,300,400);
gradient.addColorStop(0,"red");
gradient.addColorStop(1,"yellow");

// create a retangle
context.beginPath();
context.rect(250, 50, 300, 300);
context.fillStyle = gradient;
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();

// creating bezierCurves
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(650,20);
ctx.bezierCurveTo(670,80,800,100,800,20);
ctx.bezierCurveTo(850,40,950,60,850,100);
ctx.bezierCurveTo(800,150,850,225,750,250);
ctx.bezierCurveTo(600,175,550,95,700,150);
ctx.bezierCurveTo(800,100,500,40,650,20);
ctx.closePath();
ctx.strokeStyle = 'hotpink';
ctx.lineWidth = 18;
ctx.lineJoin = 'round';
ctx.fillStyle = 'lightblue';
ctx.fill();
ctx.stroke();

// straight lines with round ends
context.beginPath();
context.moveTo(1100,30);
context.lineTo(1150,280);
context.lineWidth = 13;
context.strokeStyle = '#E9967A';
context.lineCap = 'round';
context.stroke();

// straight lines with butt ends
context.beginPath();
context.moveTo(1075,30);
context.lineTo(1125,280);
context.lineWidth = 13;
context.strokeStyle = '#E9967A';
context.lineCap = 'butt';
context.stroke();

// straight lines with sqaure ends
context.beginPath();
context.moveTo(1125,30);
context.lineTo(1175,280);
context.lineWidth = 13;
context.strokeStyle = '#E9967A';
context.lineCap = 'square';
context.stroke();

// straight lines with sqaure ends
context.beginPath();
context.moveTo(1000,350);
context.lineTo(1150,350);
context.lineWidth = 15;
context.strokeStyle = '#006400';
context.lineCap = 'square';
context.stroke();

// straight lines with butt ends
context.beginPath();
context.moveTo(1000,375);
context.lineTo(1150,375);
context.lineWidth = 15;
context.strokeStyle = '#006400';
context.lineCap = 'butt';
context.stroke();

// drawing a part of a circle with counterclockwise false
var x = 125;
var y = 100;
var radius = 25;
var startAngle = 1 * Math.PI;
var endAngle = 0.2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x,y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 10;
context.strokeStyle = 'black';
context.stroke();

// drawing a part of a circle with counterclockwise true
var x = 125;
var y = 110;
var radius = 25;
var startAngle = 1 * Math.PI;
var endAngle = 0.2 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x,y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 10;
context.strokeStyle = 'black';
context.stroke();

// drawing a part of a circle with counterclockwise false
var x = 125;
var y = 300;
var radius = 45;
var startAngle = 1 * Math.PI;
var endAngle = 0.2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x,y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
context.strokeStyle = 'red';
context.stroke();

// drawing a part of a circle with counterclockwise true
var x = 110;
var y = 315;
var radius = 45;
var startAngle = 1 * Math.PI;
var endAngle = 0.2 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x,y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
context.strokeStyle = 'blue';
context.stroke();

//Second canvas createt
var canvas2 = document.getElementById('secondCanvas');
var context2 = canvas2.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;
context2.shadowColor = '#999';
context2.shadowBlur = 20;
context2.shadowOffsetX = 35;
context2.shadowOffsetY = 35;

context2.save(); // save number 1
//translate context to the center of the canvas ---- uncomment because context.transfomr matrix is in use instead.
context2.translate(canvas2.width / 2, canvas2.height / 2);

context2.save(); // save number 2
// scale X and Y component
context2.scale(3, 0.5);

context2.save(); // save number 3
// rotate rect
context2.rotate(Math.PI / 1.5);


context2.fillStyle = 'blue';
context2.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

// Translation matrix
// 1 0 tx
// 0 1 ty
// 0 0 1
//var tx = canvas2.width / 2;
//var ty = canvas2.height / 2;

// apply custom transform
context2.setTransform(1,0,0,1,0,0);

context2.fillStyle = 'red';
context2.fillRect(20,20,rectWidth, rectHeight);

context2.restore();
// restore last saved state (number 3)
context2.fillStyle = 'yellow';
context2.fillRect(rectWidth / -2, -300,rectWidth, rectHeight);

context2.restore();
// restore save state (number 2)
context2.fillStyle = 'green';
context2.fillRect(-400, rectHeight / -2,rectWidth, rectHeight);

context2.restore();
// restore save state (number 1) basic state, before translate, scale and rotate
context2.fillStyle = 'purple';
context2.fillRect(1000,300,rectWidth, rectHeight);
});
        

.CSS code

#headLine{
    text-align: center;
    font-family: Garamond, serif;
    line-height: 1em;
    /*color: #fff9d6;*/
    color: green;
    font-weight:bold;
    font-size: 68px;
    text-shadow:0px 0px 0 rgb(231,231,231),1px 1px 0 rgb(216,216,216),2px 2px 0 rgb(202,202,202),
        3px 3px 0 rgb(187,187,187),4px 4px 0 rgb(173,173,173),5px 5px 0 rgb(158,158,158),
        6px 6px 0 rgb(144,144,144),7px 7px 6px rgba(0,0,0,0.6),7px 7px 1px rgba(0,0,0,0.5),0px 0px 6px rgba(0,0,0,.2);
}
#firstCanvas{
    margin-left: 75px;
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e6f0a3), 
        color-stop(33%,#c3d825), color-stop(66%,#d2e638), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
    opacity: 0.8;
}
#secondCanvas{
    margin-left: 75px;
    /*border:1px solid #000000;*/
}
p{
    text-align: center;
}