Solid color to fill
Description
The following code uses the solid color to fill a triangle.
Example
<!DOCTYPE HTML>
<html>
<head>
<script>
function drawTriangle(context, x, y, triangleWidth, triangleHeight, fillStyle){
context.beginPath();<!-- w ww. j a v a 2s . c o m-->
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();
}
window.onload = function(){
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;
drawTriangle(context, canvas.width /2, triangleY, triangleWidth, triangleHeight, "blue");
drawTriangle(context, canvas.width /2-10, triangleY-10, triangleWidth, triangleHeight, "#8ED6FF");
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>
</body>
</html>