var Canvas = document.getElementById ("Canvas");
var Contexto = Canvas.getContext ("2d");
Canvas.width = window.innerWidth;
Canvas.height = window.innerHeight;
Contexto.beginPath ();
Contexto.fillStyle = "blue";
Contexto.arc (50, 50, 15, 0, Math.PI * 2);
Contexto.fill ();
var ColorBorde = Canvas.style.getPropertyValue ("background");
console.log (ColorBorde);
Contexto.lineWidth = 5;
Contexto.strokeStyle = ColorBorde;
Contexto.stroke ();
* {
margin: 0;
padding: 0;
}
#Canvas {
animation-name: CanvasAnimacion;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes CanvasAnimacion {
0% {background-color: red;}
50% {background-color: yellow;}
100% {background-color: blue;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Programa JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="Canvas"></canvas>
<script src="script.js"></script>
</body>
</html>
Hola buenos días, tengo estos códigos y lo que pretendo es poder poner el valor del background del canvas, en el strokeStyle del círculo, para cuando lo designe con un "rgba", pueda poner que la estela que vaya dejando, sea del mismo color que el fondo del canvas.