While installing node packages we sometime encounter following error:-
HOW TO SOLVE "UNEXPECTED END OF JSON INPUT WHILE PARSING NEAR '...6ECD3B626F9C1F57494ED' "
npm cache clean --forceThis command will clean any cache created when process of installing package with node got failed.
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:
In output user get a triangle on canvas and hypotenuse, area and perimeter of triangle in next block. As shown below: 
So lets make it,
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:
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.
SHIV CHARAN 