Drawing triangles
There is no direct function to draw a triangle using the canvas API. But we do have the other, simpler functions that, together, allow us to draw different shapes. A triangle is a combination of three joined lines. Let's see this in our new example. The output is quite simple and looks like this:
How to do it…
The triangle is drawn by calling two basic functions, namely moveTo() and lineTo(). Here is the recipe.
The HTML file:
<html>
<head>
<title>triangles</title>
<script src="triangles.js"></script>
</head>
<body onload="init()">
<canvas id="MyCanvasArea" width="200" height="200" style="border:2px solid blue;" >
your browser does not support canvas
</canvas>
<H1>Triangle</H1>
</body>
</html>The JavaScript file:
function init(){
var can = document.getElementById("MyCanvasArea");
if(can.getContext)
{
var context=can.getContext("2d");
drawTriangle(context,100,20,100,100,...
