EN
JavaScript - fillStyle vs strokeStyle
0
points
In this article, we would like to show you the difference between fillStyle and strokeStyle in JavaScript.
Quick solution:
1. strokeStyle is used for setting the shape outline color,
2 fillStyle is used for setting the fill color.
Note:
The properties can be set to a string representing a CSS color value, a gradient or a pattern. By default, the
strokeStyleandfillStylecolors are set to black.
Practical example
In this section, we present a practical example that shows the difference between strokeStyle and fillStyle properties.
// 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');
context.lineWidth = 10; // sets shape outline width (in px)
// strokeStyle
context.strokeStyle = 'green'; // sets shape outline color
// fillStyle
context.fillStyle = 'red'; // sets shape fill color
// drawing
context.beginPath();
context.rect(50, 50, 100, 100); // square shape
context.fill(); // fills the shape with fillStyle color
context.stroke();
</script>
</body>
</html>