CODEWITHSUNDEEP
htmlhtml5-canvas
Sandipan Guha
Sandipan Guha

Reputation: 126

Undesired result in canvas shape drawing (html5)

I was trying to draw a simple rhombus shape with canvas element. I used this code:

cxt.beginPath();
cxt.moveTo(100,100);
cxt.lineTo(50,150);
cxt.lineTo(100,200);
cxt.lineTo(150,150);
cxt.lineTo(100,100);
cxt.closePath();
cxt.strokeStyle = 'black';
cxt.stroke();
cxt.fillStyle='yellow';
cxt.fill();

But, output is two-sided triangle! (Printscreen below:)

enter image description here

Help me figure out what's wrong..!

browser used: mozilla firefox 43.0.4

Upvotes: 1

Views: 44

Answers (1)

Tamil Selvan C
Tamil Selvan C

Reputation: 20229

Increase the height of the canvas.

var canvas = document.getElementById("shape");
var cxt = canvas.getContext('2d');
cxt.beginPath();
cxt.moveTo(100,100);
cxt.lineTo(50,150);
cxt.lineTo(100,200);
cxt.lineTo(150,150);
cxt.lineTo(100,100);
cxt.closePath();
cxt.strokeStyle = 'black';
cxt.stroke();
cxt.fillStyle='yellow';
cxt.fill();
<canvas id="shape" width="500" height="500"></canvas>

Upvotes: 1

Related Questions