CODEWITHSUNDEEP
javascripthtmlcanvas
Alin
Alin

Reputation: 23

Javascript Canvas Draw Issue

I'm trying to draw a Cylinder, I have had expierence with HTML5 canvas & javascript before but I don't have a lot of time right now and it's probably something i'm looking overhead.

If you've found the error, please let me know. Thanks.

Here's my jsfiddle: http://jsfiddle.net/pa9reay9/

Code:

Javascript:

var c = document.getElementById("myCanvas");
var context = c.getContext("2d");

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

drawCylinder(10,10,100,50);

HTML:

<p>Where is my canvas?</p>
<div>
    <canvas id="myCanvas" width="200" height="200"></canvas>
</div>

CSS:

div {
    border: 2px solid black;
}

p {
    font-family: calibri;
    font-size: 36px;
    text-decoration: underline;
    color: red;
    padding: 0;
    margin-left: 5px;
}

Upvotes: 2

Views: 92

Answers (1)

Rhumborl
Rhumborl

Reputation: 16609

x,y,w,h are parameters to the method, not object properties, so just remove all the this.s:

var c = document.getElementById("myCanvas");
var context = c.getContext("2d");

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 = (x + w / 2) - (w / 2 * Math.sin(i)) * 
      Math.sin(0 * Math.PI) + (w / 2 * Math.cos(i)) * 
      Math.cos(0 * Math.PI);

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

    if (i == 0) {
      context.moveTo(xPos, yPos);

    } 
    else
    {
      context.lineTo(xPos, yPos);
    }
  }
  context.moveTo(x, y + h / 8);
  context.lineTo(x, y + h - h / 8);

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

    if (i == 0) {
      context.moveTo(xPos, yPos);

    } 
    else 
    {
      context.lineTo(xPos, yPos);
    }
  }
  context.moveTo(x + w, y + h / 8);
  context.lineTo(x + w, y + h - h / 8);            
  context.stroke();
}

drawCylinder(10,10,100,50);

Fixed Fiddle

Upvotes: 1

Related Questions