canvas2D - Shape

by jeum

HTML

<canvas id="canvas2d" width="500" height="500"></canvas>

JavaScript

// note: canvas renders (0,0) in the upper-left
var polygon = [
 	[
         {x: 3, y: 4},
         {x: 0, y: 4},
         {x: 3, y: 10},
         {x: 10, y: 0},
         {x: 3, y: 4},
	], [
         {x: 3, y: 5},
         {x: 6, y: 4},
         {x: 3, y: 7},
         {x: 3, y: 5}
	]
];

var context = document.getElementById('canvas2d').getContext('2d');
context.scale(50, 50);
context.beginPath();
polygon.forEach(function(ring)
    {
		ring.forEach(function(point, index)
        {
			if (index === 0) {
				context.moveTo(point.x, point.y);
			} else {
				context.lineTo(point.x, point.y);
			}
		});
    });
context.lineWidth = 0.05;
context.strokeStyle = 'black';
context.fillStyle = 'green';
context.fill();
context.stroke();