Warum mischt Javascript meine Farben automatisch?
Ich fange gerade mit Javascript und HTML5 an, daher ist es sehr wahrscheinlich, dass ich einen wirklich blöden Fehler mache. Tatsächlich hoffe ich, dass das alles ist und dass dies eine einfache Lösung ist.
Hier ist die Ausgabe, die ich bekomme:
Ich möchte nur ein blaues Rechteck über das graue Rechteck zeichnen, wobei beide Farben ihre eigene Sache sind. Ich bin ehrlich verwirrt, warum diese Mischung die Standardeinstellung ist (mit Chrome auf meinem Computer).
Hier ist das minimale Arbeitsbeispiel (wieder für meine Maschine):
(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, das ist das 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);