How to draw a cylinder on html5 canvas

Question

I want to draw a cylinder on canvas with control box to re size the cylinder.

Answer 1

 var canvas = document.getElementById('canvas')
    var ctx = canvas.getContext('2d');
    var pos={};
    const angleToRadian = function (angle) {
        return Math.PI / 180 * angle;
    }


    var Arc = function (x, y, r, d,s) {
        this.r = r;
        this.x = x;
        this.y = y;
        // this.d=d;

        ctx.beginPath();

        ctx.arc(x, y, r, angleToRadian(0), angleToRadian(180));
        ctx.moveTo((Number(x) + Number(r)), y);
        // ctx.lineTo((Number(x) + Number(r)), d);
        ctx.arc(x, y - d, r, angleToRadian(0), angleToRadian(360));
        ctx.moveTo((Number(x)+Number(r)),y);
        ctx.lineTo((Number(x)+Number(lX())), ((Number(y)-Number(d))+Number(r)-Number(lY())));
        // ctx.moveTo((Number(x)+Number(lX())), ((Number(y)-Number(d))-Number(lY())+Number(r)));
        ctx.lineTo((Number(x)+Number(lX())),(Number(y)+Number(r)-Number(lY())));
        // ctx.moveTo((Number(x)+Number(lX())),(Number(y)+Number(r)-Number(lY())));
        ctx.lineTo(Number(x), ((Number(y)+Number(r))-Number(d)));
        // ctx.moveTo(Number(x), ((Number(y)+Number(r))-Number(d)));
        ctx.lineTo(Number(x),(Number(y)+Number(r)));
        // ctx.moveTo(Number(x),(Number(y)+Number(r)));
        ctx.lineTo((Number(x)-Number(lX())), (Number(y)-Number(d)+Number(r)-Number(lY())));
        // ctx.moveTo((Number(x)-Number(lX())), (Number(y)-Number(d)+Number(r)-Number(lY())));
        ctx.lineTo((Number(x)-Number(lX())), (Number(y)+Number(r)-Number(lY())));
        // ctx.moveTo((Number(x)-Number(lX())), (Number(y)+Number(r)-Number(lY())));
        ctx.lineTo((Number(x)-Number(r)), (Number(y)-Number(d)));
        // ctx.moveTo((Number(x)-Number(r)), (Number(y)-Number(d)));
        ctx.lineTo((Number(x)-Number(r)), y);

        ctx.strokeStyle = "#9c3028";
        ctx.closePath();
        // ctx.stroke();
        ctx.fillStyle="#9b3028"
        ctx.fill();

    }


    var lY = function () {

        return Math.sqrt((Math.pow(((Math.cos(67.5 * Math.PI / 180) * this.r) * 2), 2) -
            Math.pow((Math.cos(22.5 * Math.PI / 180) * (Math.cos(67.5 * Math.PI / 180) * this.r) * 2), 2)));


    }
    var lX = function () {
        return Math.sqrt((Math.pow(((Math.cos(67.5 * Math.PI / 180) * this.r) * 2), 2) - (Math.pow(((Math.cos(67.5 * Math.PI / 180) * this.r) * 2), 2) -
            Math.pow((Math.cos(22.5 * Math.PI / 180) * (Math.cos(67.5 * Math.PI / 180) * this.r) * 2), 2))));
    }

    document.addEventListener('mouseup',mouseUp);
    document.addEventListener('mousedown',mouseDown);
    document.addEventListener('mousemove',draw);

    function mouseDown(e){
        pos.x=e.clientX;
        pos.y=e.clientY;

    }
    function mouseUp(e){
        pos.pozX=e.clientX;
        pos.pozY=e.clientY;

    }
    function draw(e){
        if(e.buttons!==1) return;
        ctx.clearRect(0,0,500,500);
       Arc(pos.x, pos.y, e.clientY, e.clientX);
    }

Answer 2

Thank you! This is just what I was looking for. While implementing your function in my own code I made some changes like passing in the canvas context as an argument, simplifying the math and getting the code to pass JSLint.

function drawCylinder(ctx, x, y, w, h) {
    'use strict';
    var i, xPos, yPos, pi = Math.PI, twoPi = 2 * pi;

    ctx.beginPath();

    for (i = 0; i < twoPi; i += 0.001) {
        xPos = (x + w / 2) - (w / 2 * Math.cos(i));
        yPos = (y + h / 8) + (h / 8 * Math.sin(i));

        if (i === 0) {
            ctx.moveTo(xPos, yPos);
        } else {
            ctx.lineTo(xPos, yPos);
        }
    }
    ctx.moveTo(x, y + h / 8);
    ctx.lineTo(x, y + h - h / 8);

    for (i = 0; i < pi; i += 0.001) {
        xPos = (x + w / 2) - (w / 2 * Math.cos(i));
        yPos = (y + h - h / 8) + (h / 8 * Math.sin(i));

        if (i === 0) {
            ctx.moveTo(xPos, yPos);
        } else {
            ctx.lineTo(xPos, yPos);
        }
    }
    ctx.moveTo(x + w, y + h / 8);
    ctx.lineTo(x + w, y + h - h / 8);

    ctx.stroke();
}

Answer 3

If you want to draw a 3D cylinder, the easiest way is to use a library like tQuery (http://jeromeetienne.github.com/tquery/) :

var world = tQuery.createWorld().boilerplate().start();
var object = tQuery. createCylinder().addTo(world);

If you want to draw a '2d' cylinder, you can do so using canvas 2d API to draw a rectangle then a elipse in top of it. It will appear as a cylinder.

Answer 4

Here's some javascript code I created to answer my own question:

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();
}