I'm dabbling with html5 and javascript (I know nothing of both). I found an example of some html5, copied it, and started experimenting. Heres some code. The idea is that when any key is pressed, two squares start moving left (doesn't clean up behind it yet). What I don't understand is why I cant change colour (Ive indicated below). Any ideas? Im obviously doing something very wrong.
<!doctype html>
<!-- this source copied from http://www.xanthir.com/blog/b48B0 -->
<canvas width=800 height=800>
</canvas>
<script>
var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext('2d');
var x = 230;
var y = 380;
// First, we'll paint the whole canvas black.
context.fillStyle = "black";
context.fillRect(0,0,800,800);
context.fillStyle = "red";
context.fillRect(0,0,30,30);
context.fillRect(0,100,30,30);
context.fillStyle = "green";
context.fillRect(0,200,30,30);
// Now we'll draw some shapes
// circle
context.fillStyle = "#06c";
context.strokeStyle = "white";
// These can be any CSS color.
context.lineWidth = 3;
context.beginPath();
context.moveTo(450,250);
context.arc(375,250,75,0,2*Math.PI,false)
context.closePath();
context.fill();
context.stroke();
// A triangle! And a rainbow!
context.beginPath();
context.moveTo(150,50);
context.lineTo(90,150);
context.lineTo(210,150);
context.lineTo(150,50);
context.closePath();
var rainbow = context.createLinearGradient(150,50,150,150);
rainbow.addColorStop(.1,"red");
rainbow.addColorStop(.3,"orange");
rainbow.addColorStop(.5,"yellow");
rainbow.addColorStop(.7,"lime");
rainbow.addColorStop(.9,"blue");
context.fillStyle = rainbow;
context.fill();
// Some text! And a shadow!
context.shadowOffsetX = -2;
context.shadowOffsetY = 2;
context.shadowColor = "#f88";
context.shadowBlur = .01;
context.fillStyle = "red";
context.font = "bold 72px monospace";
context.fillText("Foo Bar",30,400);
context.fillStyle = "blue";
context.fillRect(0,300,30,30);
// ???????????? end of main. The current context now seems to remain (blue fillstyle with some shadow )
// routine here : press any key to animate two new blocks over writing ----------------
document.onkeydown = function(e) {
context.fillstyle = "red"; // <-- ???????? this doesnt work (remains same colour as last one in main )
context.fillRect(x,y,50,50); // <-- ???????? draws a square in blue, not red
x = x - 5;
context.fillstyle = "white"; // <-- ???????? this doesnt work (remains same colour as last one in main )
context.fillRect(x -100,y ,50,50); // <-- ???????? draws a square in blue, not white
}
context.fillStyle, capitalS.