Rita fyrkanter med html5 på en html5 duk

I den sista läraren gjorde vi en html5 duk. Så är vad en duk utan grejer på som duk. Så när du skapar en form du skulle antagligen färg rätt? att göra en fyllningsfärg måste du ha lite kod som ser ut såhär-

ctx.fillStyle = "#F00000";

Som kommer att ange fyllningsfärg till svart, men du kommer inte se något eftersom vi inte rita torget men koden för en kvadrat-

ctx.fillRect(0,0,50,50);

Som kommer att rita en fyrkant på koordinaterna 0 X 0Y och bredden skulle vara 50 så höjden måste vara 50.

Bra nu kan vi titta på hela html5-fil och som kommer att se ut så här-

< html >

< duk id = "duk" bredd = "400" höjd = "400" >< / canvas >

< script >

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

ctx.fillStyle = "#F00000";

ctx.fillRect(0,0,50,50);

< / script >

< / html >