Canvas ile üçgen çizmek için çizilecek şeklin (üçgen) üç köşesinin x ve y koordinatlarını belirlemeniz gereklidir.
strokeStyle kullanılarak çizim yaparken ilk köşe , ikinci köşe ve üçüncü köşeyi birleştiririz.
<!DOCTYPE html>
<html>
<body>
<h1>Canvas Örneği</h1>
<canvas id="canvas" width="600" height="500"> Tarayıcı canvas özeliğini desteklemiyor.</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var canvas1 = canvas.getContext('2d');
canvas1.beginPath();
canvas1.strokeStyle = "#0000ff";
canvas1.moveTo(120, 205);
canvas1.lineTo(70, 125);
canvas1.lineTo(30, 205);
canvas1.closePath();
canvas1.stroke();
</script>
</body>
</html>
Bu üçgenin içini doldurmak istersek kodu şöyle değiştiriyoruz
<!DOCTYPE html>
<html>
<body>
<h1>Canvas Üçgen Örneği</h1>
<canvas id="canvas" width="600" height="500"> Tarayıcı canvas özeliğini desteklemiyor.</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var canvas1 = canvas.getContext('2d');
canvas1.fillStyle = "#0000ff";
canvas1.beginPath();
canvas1.moveTo(120, 205);
canvas1.lineTo(70, 125);
canvas1.lineTo(30, 205);
canvas1.closePath();
canvas1.fill();
</script>
</body>
</html>
