Različiti stilovi unutar trouglova
<script>
function drawTriangle(context, x, y, triangleWidth,
triangleHeight, fillStyle){
context.beginPath();
context.moveTo(x, y);
context.lineTo(x + triangleWidth / 2, y + triangleHeight);
context.lineTo(x - triangleWidth / 2, y + triangleHeight);
context.closePath();
context.fillStyle = fillStyle;
context.fill();}
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
var grd;
var triangleWidth = 150;
var triangleHeight = 150;
var triangleY = canvas.height / 2 - triangleWidth / 2;
// početak definisanja prvog trougla
drawTriangle(context, canvas.width * 1 / 6, triangleY,
triangleWidth, triangleHeight, "#8B008B");
// kraj definisanja prvog trougla
// početak definisanja drugog trougla
grd = context.createLinearGradient(canvas.width * 2 / 6,
triangleY, canvas.width * 2 / 6, triangleY + triangleHeight);
grd.addColorStop(0.5, "#DA70D6");
grd.addColorStop(1, "#8B008B");
drawTriangle(context, canvas.width * 2 / 6, triangleY,
triangleWidth, triangleHeight, grd);
// kraj definisanja drugog trougla
// početak definisanja trećeg trougla
var centerX = (canvas.width * 3 / 6 +
(canvas.width * 3 / 6 - triangleWidth / 2) +
(canvas.width * 3 / 6 + triangleWidth / 2)) / 3;
var centerY = (triangleY +
(triangleY + triangleHeight) +
(triangleY + triangleHeight)) / 3;
grd = context.createRadialGradient(centerX, centerY, 10,
centerX, centerY, 100);
grd.addColorStop(0.15, "red");
grd.addColorStop(0.19, "orange");
grd.addColorStop(0.4, "yellow");
grd.addColorStop(0.003, "green");
grd.addColorStop(0.5, "violet");
grd.addColorStop(1, "blue");
drawTriangle(context, canvas.width * 3 / 6, triangleY,triangleWidth, triangleHeight, grd);
// kraj definisanja trećeg trougla
Sledeća strana