Pregled mogućnosti HTML5 jezika

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