Draw a rotating triangle by using JavaScript.

made by SHIV CHARAN

In this post you can learn how to draw a rotating triangle on canvas by using HTML and JavaScript. And design it with CSS.

Firstly user enter length of perpendicular , base and angle to rotate triangle as input.        As shown below:emptycanvas In output user get a triangle on canvas and hypotenuse, area and perimeter of triangle in next block. As shown below:                        filledcanvas So lets make it,

Drawing Triangles

First, make sure you have a canvas element defined in your HTML page, and give it an id of myCanvas. To help you out with this, here is what my HTML looks like:

<!doctype html>
<head>
<title>
triangle
</title>
</head>
<body>
<div id=”header” >
<h1><i> DRAW TRIANGLE </i></h1>
<div class=”canvas”>
<canvas id=”myCanvas”>
</canvas>
</div>
<div class=”input”>
<label>Enter length of base</label>
<input type=”text” id=”userInputx”=></input>
<label>Enter length of perpendicular</label>
<input type=”text” id=”userInputy”=></input>
<label>Enter angle to rotate triangle</label>
<input type=”text” id=”userInputr”=></input>
<button onclick=”test()”>Submit</button>
</div>
<p id=”detail” ></p>
<div class =”footer”>
<h3><i>Made by SHIV CHARAN</i></h3>
</div>
</div>

</body>
</html>

It is inside this canvas element we will draw our triangle.

Brief Intro to Canvas

The canvas element allows you to programatically place pixels on the screen. It does all of this by expecting you to specify simple (and often tedious) draw commands that mimic the path a pen would take on a piece of paper

The way you draw a triangle is by putting into code the following steps:

  1. Declare your intent to draw lines so that the canvas knows what to expect
  2. Move your virtual pen to to the x and y co-ordinate where you wish to start drawing the triangle
  3. With your virtual pen at the starting point, use the lineTo method to draw lines between two points.
  4. Specify the fill color, line color / thickness, etc. to adjust how your triangle looks

Inside the script tag, add the following lines of code:

function test()
{

var uIx = document.getElementById(“userInputx”).value;

var uIy = document.getElementById(“userInputy”).value;
var uIr= document.getElementById(“userInputr”).value;

var canvasElement = document.querySelector(“#myCanvas”);
var c=Math.sqrt(Math.pow(uIx,2)+Math.pow(uIy,2));
canvasElement.height=c*60;
canvasElement.width=c*60;
document.getElementById(“myCanvas”).style.overflow=”scroll”;
var context = canvasElement.getContext(“2d”);

context.translate(c*30,c*30);
context.rotate(-uIr*Math.PI/180);
// the triangle
context.beginPath();

context.moveTo(5, 5);

context.lineTo(5,uIy*30);

context.lineTo(uIx*30, uIy*30);

context.closePath();

// the outline

context.lineWidth = 5;

context.strokeStyle = ‘#000000’;

context.stroke();

// the fill color

context.fillStyle = “#FF0000”;

context.fill();
context.moveTo(x,x);

var area=uIy*uIx/2;
var para= parseInt(uIx) +parseInt(uIy) +parseInt(c);
var p=document.getElementById(“detail”);

p.innerHTML=”Value of hypotenous is “+c+”. Area is “+area+” .Perimeter is “+para ;
}

To  style our HTML let design it with CSS, to do so ,add the following line of code in style teg of html;

body{min-width:0;height:100%;}
h1{background-color: #ff0000;text-align: center;border-radius: 10px;border:2px solid black;}
div.canvas{ border:2px solid black;margin: 2%; border-radius: 10px; width:default; overflow: scroll; background-color:;}
div.input{padding: 2%;background-color: #ff0000; border-radius: 10px;border:2px solid black;}
label{display: inline-block;font-family: arial;color: #000000;width: 48%;}
input{width: 48%;border-radius: 10px;border:2px solid black;padding: 1px;}
button{background-color: white;width: 96%;font-family: arial;margin-top: 2%;border-radius: 10px;border:2px solid black;float: middle;}
#header{padding: 5px; border: 5px double #000000;border-radius: 10px;}
#myCanvas{ overflow: scroll;text-align: center;text-overflow: scroll;}
p{background-color: white;border-radius: 10px;border:2px solid black; font-family: arial;padding: 2%;text-align: center;text-indent: 3px;}
div .footer{background-color: black;color: #ff0000;font-family: arial;text-align: center;padding:2%;height: 10%;border-radius: 10px;}

Now, Let’s look at how the lines of code we have written (javascript)map to the triangle that you see on the screen. Starting at the top…

var uIx = document.getElementById(“userInputx”).value;

var uIy = document.getElementById(“userInputy”).value;
var uIr= document.getElementById(“userInputr”).value;

These two line of code store input length of perpendicular , base and angle in variable uIx and uIy and uIr respectively.

var canvasElement = document.querySelector(“#myCanvas”);
var context = canvasElement.getContext(“2d”);

These two lines are a mainstay at the top of almost every canvas-related code you will be dealing with. The first line gets a pointer thecanvas element in our HTML. The second line gets you access to the canvas element’s context object that allows you to actually draw things into the canvas.

c=Math.sqrt(Math.pow(uIx,2)+Math.pow(uIy,2));
canvasElement.height=c*60;
canvasElement.width=c*60;
document.getElementById(“myCanvas”).style.overflow=”scroll”;

The first line calculate the hypotenuse of triangle and other provide appropriate size to canvas.

context.translate(c*30,c*30);
context.rotate(-uIr*Math.PI/180);

First line create another canvas at coordinate (c*30,c*30) to provide area to rotate triangle.And second line rotate the triangle.

// the triangle
context.beginPath();

context.moveTo(5, 5);

context.lineTo(5,uIy*30);

context.lineTo(uIx*30, uIy*30);

context.closePath();

Because these lines are crucial to drawing our triangle, I’m going to slow down and dive into greater detail on what each line does.

The first line sets it all up:

context.beginPath();

The beginPath method signals to the canvas that you intend to draw a path. I know that is a very unsatisfying explanation, but I never said this line of code was deep and full of meaning. It will hopefully make more sense as we look at the rest of the lines

The next line defines where to start our path from:

context.moveTo(5,5);

That is handled by the moveTo function which takes an x and y co-ordinate value. In our case, we are going to be starting the path from a horizontal and vertical position of 5:

starting point

With the starting point set, it’s time to start drawing the lines that make up our triangle:

context.lineTo(5,uIy*30);
ontext.lineTo(uIx*30,uIy*30);

The first lineTo function draws a line from our starting point of (5,uIy*30) to (uIx*30, uIy*30);

the first line is upon us

The second lineTo function picks up from where the pen currently is and draws a line from (, 300) to (300, 300):

another line bites the dust

Right now, we have an L shape that isn’t quite a triangle. To make this a triangle, we need to close this path by drawing a straight line from where we are back to the beginning.

context.closePath()

The closePath() method tells your pen to draw a line back to the starting point.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s