EN
JavaScript - how to fill circle with certain color on canvas element?
5 points
Simple solution:
xxxxxxxxxx1
context.fillStyle = color;2
3
context.beginPath();4
context.arc(x, y, radius, 0, 2 * Math.PI);5
context.fill();
Using JavaScript it is possible to draw filled circle with certain color in following way.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
#my-canvas { border: 1px solid gray; }7
8
</style>9
</head>10
<body>11
<canvas id="my-canvas" width="200" height="200"></canvas>12
<script>13
14
var canvas = document.querySelector('#my-canvas');15
var context = canvas.getContext('2d');16
17
function fillCircle(x, y, radius, color) {18
19
context.fillStyle = color;20
21
context.beginPath();22
context.arc(x, y, radius, 0, 2 * Math.PI);23
context.fill();24
}25
26
fillCircle(100, 100, 80, 'yellow');27
28
</script>29
</body>30
</html>