I use canvas and draw a closed area and want the area to fill by some color. Here is how I do it. I draw closed area with lines
So as result I have closed area and want to fill by some color
Here is the chunk of code I used:
context.fillStyle = '#8ED6FF';
context.fill();
But it not works. Неre is the code I use to accomplish the task.
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="978" height="900"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// begin custom shape
context.beginPath();
// line (1)
context.moveTo(10, 10);
context.lineTo(190, 190);
// line (2)
context.moveTo(190, 190);
context.lineTo(200, 280);
// line (3)
context.moveTo(200, 280);
context.lineTo(10, 10);
// here I try fill the area by color
context.fillStyle = '#8ED6FF';
context.fill();
context.stroke();
</script>
</body>
</html> I found the solution.
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="978" height="900"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// begin custom shape
context.beginPath();
context.moveTo(70, 70);
context.lineTo(290, 290);
context.lineTo(300, 380);
context.closePath()
context.fillStyle = '#8ED6FF';
context.fill();
context.stroke();
</script>
</body>
</html>