draw a line

<canvas id='mycanvas' width='100' height='100'></canvas>
<script>
var x=document.getElementById("mycanvas");
var ctx=x.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(10,30);
ctx.stroke()
</script>

image.png

draw a rect or a angle

<canvas id='mycanvas' width='100' height='100'></canvas>
<script>
var x=document.getElementById("mycanvas");
var ctx=x.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(10,50);
ctx.lineTo(30,50);
ctx.lineTo(30,10);
ctx.stroke()
</script>

image.png

draw a rect simply

<canvas id='mycanvas' width='100' height='100'></canvas>
<script>
var x=document.getElementById("mycanvas");
var ctx=x.getContext("2d");
ctx.rect(10,10,100,50);
ctx.stroke();
</script>

image.png

something is wrong?!

<canvas id='mycanvas' width='100' height='100'></canvas>
<script>
var x=document.getElementById("mycanvas");
var ctx=x.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.stroke();
</script>

image.png

why is black?
change it to red!

<canvas id='mycanvas' width='100' height='100'></canvas>
<script>
var x=document.getElementById("mycanvas");
var ctx=x.getContext("2d");
ctx.fillStyle='red'
ctx.fillRect(10,10,100,50);
ctx.stroke();
</script>

image.png

ok ,got it !

draw a green rect

<canvas id='mycanvas' width='100' height='100'></canvas>
<script>
var x=document.getElementById("mycanvas");
var ctx=x.getContext("2d");
ctx.beginPath();
ctx.strokeStyle='green'
ctx.lineWidth='6';
ctx.rect(10,10,40,30);
ctx.stroke()
</script>

image.png

draw a xx rect

<canvas id='mycanvas' width='100' height='100'></canvas>
<script>
var x=document.getElementById("mycanvas");
var ctx=x.getContext("2d");
ctx.beginPath();
ctx.strokeStyle='green'
ctx.lineWidth='6';
ctx.fillStyle='red';
ctx.rect(10,10,40,30);
ctx.fill();
ctx.stroke()
</script>

image.png

draw a circle

<canvas id='mycanvas' width='100' height='100'></canvas>
<script>
var x=document.getElementById("mycanvas");
var ctx=x.getContext("2d");
ctx.fillStyle='red'
ctx.arc(50,50,20,0,2*Math.PI);
</script>

and we got nothing! we need fill() method. why ? no reason. maybe because there isn't a fillarc() method!

<canvas id='mycanvas' width='100' height='100'></canvas>
<script>
var x=document.getElementById("mycanvas");
var ctx=x.getContext("2d");
ctx.fillStyle='red'
ctx.arc(50,50,20,0,2*Math.PI);
ctx.fill()
</script>

image.png

darw a semi cycle

just set the start angle and the end angle

image.png