Monday, May 20, 2024
Homepage · canvas
 Popular · Latest · Hot · Upcoming
6
rated 0 times [  7] [ 1]  / answers: 1 / hits: 22495  / 9 Years ago, fri, september 25, 2015, 12:00:00

I am having trouble drawing a triangle on a canvas. Triangle: equilateral triangle with 2 points on the x-axis. So what I was thinking: I start in the bottom right corner, move up to the next point, and then move to the last point in the lower left. Here is what I have: 





<!doctype html>

    <html lang=en>

    <head>

    <meta charset= UTF-8>

    

    <script type=text/JavaScript>

    	function draw() {

    		var canvas = document.getElementById('canvas');

      		if (canvas.getContext) {

       			var ctx = canvas.getContext('2d');

    			

    			var sWidth = screen.width;

    			var sHeight = screen.height;

        		var path=new Path2D();

        		path.moveTo((sWidth/2)+50,sHeight/2);

        		path.lineTo((sWidth/2),(sHeight/2)-50);

        		path.lineTo((sWidth/2)-50,sHeight/2);

        		ctx.fill(path);

      		}

      	}

    

    

    </script>

    </head>

    

    <body onload=draw();>

    	<div align = center>

    		<canvas id = canvas>

    

    		</canvas>

    

    	</div>

    

    </body>

    </html>





Nothing gets drawn. I read: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes, but I'm not sure what I messed up.


More From » canvas
 Answers
27

You need to give a size to your canvas. Either with CSS, HTML or in JavaScript



Here is a snippet that works :





 function draw() {

        var canvas = document.getElementById('canvas');

        if (canvas.getContext) {

            var ctx = canvas.getContext('2d');



            var sWidth = canvas.width;

            var sHeight = canvas.height;

            var path=new Path2D();

            path.moveTo((sWidth/2)+50,sHeight/2);

            path.lineTo((sWidth/2),(sHeight/2)-50);

            path.lineTo((sWidth/2)-50,sHeight/2);

            ctx.fill(path);

        }

    }



draw();

<!doctype html>

<html lang=en>

<head>

<meta charset= UTF-8>



<style>canvas { width: 200px; height: 200px; border: 1px solid red; }</style>

</head>



<body>

  <canvas id=canvas>



  </canvas>

</body>

</html>




[#64926] Wednesday, September 23, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
zariahdiamondz
Add To Favorites
Follow
Total Points: 649
Total Questions: 109
Total Answers: 88
Location: Tajikistan
Member since Thu, Apr 14, 2022
2 Years ago
zariahdiamondz questions
Wed, Jul 13, 22, 00:00, 2 Years ago
Thu, Nov 4, 21, 00:00, 3 Years ago
Tue, Jun 15, 21, 00:00, 3 Years ago
Tue, Apr 20, 21, 00:00, 3 Years ago
Thu, Apr 8, 21, 00:00, 3 Years ago
View All
;