to draw a triangle whose sides are long and can be changed(without uses states). I have JavaScript code but I do not know how to use it in the storyline?

Lets educate you somewhat.

1) Storyline as is doesnot support the Canvas-element. As is Storyline is all DOM-based.
2) The code as is you have here, only draws a line on Canvas. A line from 0,0 to point 300,150.

So how can i get this done then ?

Well several methods. One is making a separate HTML, add all your code inthere and add that as WebObject in Storyline. I would suggest you go that route because thats the easiest.

Other option is create a Canvas-element in Storyline with Javascript and then add Canvas drawing code like yours to it so you can draw on Canvas in Storyline. For this route you really need to know Javascript well, so i donot advise that to you as you are clearly just starting with it.

As said the second option i DONOT advise you use because you need thorough Javascript knowledge for it. But when you do know it it is possible...as you can see here.

https://360.articulate.com/review/content/20a7965e-832d-4316-a615-8da3746a839f/review

Kind regards,
Math