EN
JavaScript - how to clear canvas with specific color?
6 points
In this article, we would like to show how to clear canvas element using specific color in JavaScript.
To clear canvas with specific color it is necessary to use fillRect() function.
Quick solution:
xxxxxxxxxx1
context.fillStyle = 'yellow'; // color format: 'yellow', '#FFFF00', 'rgb(255,255,0)' or 'rgba(255,255,0,1)'2
context.fillRect(0, 0, canvas.width, canvas.height);
xxxxxxxxxx1
function clearCanvas(canvas, context, color) {2
context.fillStyle = color;3
context.fillRect(0, 0, canvas.width, canvas.height);4
}xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
#my-canvas { border: 1px solid gray; }7
8
</style>9
</head>10
<body>11
<button onclick="drawCircle()">Draw circle!</button>12
<button onclick="clearCanvas('yellow')">Clear canvas!</button>13
<br /><br />14
<canvas id="my-canvas" width="200" height="200"></canvas>15
<script>16
17
var canvas = document.querySelector('#my-canvas');18
var context = canvas.getContext('2d');19
20
var xCenter = canvas.width / 2;21
var yCenter = canvas.height / 2;22
var circleRadius = 80;23
24
function drawCircle() {25
context.lineWidth = 5.0;26
context.strokeStyle = '#0000ff';27
context.fillStyle = '#ff0000';28
context.beginPath();29
context.arc(xCenter, yCenter , circleRadius, 0, 2 * Math.PI);30
context.fill();31
}32
33
function clearCanvas(color) {34
context.fillStyle = color;35
context.fillRect(0, 0, canvas.width, canvas.height);36
}37
38
clearCanvas('yellow'); // color format: 'yellow', '#FFFF00', 'rgb(255,255,0)' or 'rgba(255,255,0,1)'39
drawCircle();40
41
</script>42
</body>43
</html>