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
