EN
JavaScript - how to fill circle with certain color on canvas element?
5
points
Simple solution:
context.fillStyle = color;
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI);
context.fill();
Using JavaScript it is possible to draw filled circle with certain color in following way.
1. fillStyle property and arc() method example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
#my-canvas { border: 1px solid gray; }
</style>
</head>
<body>
<canvas id="my-canvas" width="200" height="200"></canvas>
<script>
var canvas = document.querySelector('#my-canvas');
var context = canvas.getContext('2d');
function fillCircle(x, y, radius, color) {
context.fillStyle = color;
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI);
context.fill();
}
fillCircle(100, 100, 80, 'yellow');
</script>
</body>
</html>