¿Por qué Javascript mezcla automáticamente mis colores?
Estoy empezando con Javascript y HTML5, así que es muy probable que esté cometiendo un error realmente tonto. De hecho, espero que sea todo lo que es y que sea una solución fácil.
Aquí está la salida que estoy recibiendo:
Lo que quiero que suceda es simplemente dibujar un rectángulo azul sobre el rectángulo gris, donde los dos colores son lo suyo. Honestamente estoy confundido en cuanto a por qué esta combinación es la predeterminada (usando Chrome en mi máquina).
Aquí está el ejemplo de trabajo mínimo (de nuevo, para mi máquina):
(html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple Canvas Game</title>
</head>
<body>
<script src="js/game.js"></script>
</body>
</html>
(javascript, este es el game.js)
//set up the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
// Draw everything
var render = function () {
ctx.clearRect(50, 50, 100, 100);
ctx.fillStyle = "rgb(240, 240, 240)";
ctx.fillRect(0, 0, 100, 100);
ctx.strokeStyle="rgb(0, 0, 255)";
ctx.strokeRect(20,20,150,100);
}
setInterval(render, 10);