i will need page of html and java script to draw this figure

i will need page of html and java script to draw this figure((Cylinder on a C?anvas)) in HTML5 and JAVA SCRIPT

Programming exercises 1. Draw the following figure of a cylinder on a canvas

<!DOCTYPE html>

<html>

<head>

<title>Cylinder effect</title>

</head>

<body>

</div>

var context = document.getElementById(\'canvas\').getContext(\'2d\');

var cylinder = {width: 30, height: 100};

var x = -cylinder.width / 2;

var y = -cylinder.height / 2;

var baseColor = \"#c00\";

var tick = 0;

function draw() {

context.clearRect(0, 0, context.canvas.width, context.canvas.height);

context.save();

context.translate(context.canvas.width / 2, context.canvas.height / 2);

var gradient = context.createLinearGradient(x, y, x + cylinder.width, y);

gradient.addColorStop(0, baseColor);

gradient.addColorStop(0.25, $.xcolor.lighten(baseColor, 1));

gradient.addColorStop(0.5, baseColor);

gradient.addColorStop(0.75, $.xcolor.darken(baseColor, 0.5));

gradient.addColorStop(1, baseColor);

context.rotate(tick++ / 180 * Math.PI);

context.fillStyle = gradient;

context.fillRect(x, y, cylinder.width, cylinder.height);

context.restore();

console.log(\"Tick\");

}

setInterval(draw, 1000 / 20);

</script>

</body>

</html>