i need help in how to Draw figure ofa Cylinder on a Canvas i

i need help in how to Draw figure ofa Cylinder on a C?anvas in HTML5 and JAVA SCRIPT

Solution

function drawCylinder ( x, y, w, h ) {

context.beginPath(); //to draw the top circle

for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.001) {

    xPos = (this.x + this.w / 2) - (this.w / 2 * Math.sin(i)) *

      Math.sin(0 * Math.PI) + (this.w / 2 * Math.cos(i)) *

      Math.cos(0 * Math.PI);

    yPos = (this.y + this.h / 8) + (this.h / 8 * Math.cos(i)) *

      Math.sin(0 * Math.PI) + (this.h / 8 *

      Math.sin(i)) * Math.cos(0 * Math.PI);

    if (i == 0) {

      context.moveTo(xPos, yPos);

    }

    else

    {

      context.lineTo(xPos, yPos);

    }

}

context.moveTo(this.x, this.y + this.h / 8);

context.lineTo(this.x, this.y + this.h - this.h / 8);

for (var i = 0 * Math.PI; i < Math.PI; i += 0.001) {

    xPos = (this.x + this.w / 2) - (this.w / 2 * Math.sin(i)) * Math.sin(0 * Math.PI) + (this.w / 2 * Math.cos(i)) * Math.cos(0 * Math.PI);

    yPos = (this.y + this.h - this.h / 8) + (this.h / 8 * Math.cos(i)) * Math.sin(0 * Math.PI) + (this.h / 8 * Math.sin(i)) * Math.cos(0 * Math.PI);

    if (i == 0) {

      context.moveTo(xPos, yPos);

    }

    else

    {

      context.lineTo(xPos, yPos);

    }

}

context.moveTo(this.x + this.w, this.y + this.h / 8);

context.lineTo(this.x + this.w, this.y + this.h - this.h / 8);           

context.stroke();

}