CREATING A CIRCLE ON CANVAS

CREATING A CIRCLE ON CANVAS

Consider a following code for creating a circle on a canvas 


<!DOCTYPE HTML>
<HTML>
<HEAD>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-9961622779713084",
    enable_page_level_ads: true
  });
</script>
<TITLE> CREATING A HUT</TITLE>
</HEAD>
<BODY>
<canvas id="gameCanvas" width="300" height="300" Style="border:2px solid black">
</canvas>
<SCRIPT>
var c=document.getElementById("gameCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(80,90,50,0,Math.PI*2, false);
ctx.closePath();
ctx.fillStyle="blue";
ctx.fill();
</SCRIPT>
</BODY>
</HTML>

In the preceding code, a circle of a radius 50 is filled with a blue color is drawn on a canvas at the cooridinate (80,90)
Result

Code


<HTML>
<HEAD>
<TITLE> Music beam note</TITLE>
</HEAD>
<BODY>
<canvas id="gameCanvas" width="500" height="300" Style="border:1px solid black">
</canvas>
<SCRIPT>
var c=document.getElementById("gameCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineTo(80,150);
ctx.moveTo(100,10);
ctx.stroke();
ctx.lineTo(100,100);
ctx.moveTo(300,150);
ctx.stroke();
ctx.fill();
ctx.lineTo(300,10);
ctx.moveTo(300,10);
ctx.stroke();

 ctx.fillRect(100,10,200,30);
ctx.beginPath();
ctx.arc(100,120,30,0,Math.PI*2, false);
ctx.closePath();
ctx.fillStyle="blue";
ctx.fill();
ctx.beginPath();
ctx.arc(300,120,30,0,Math.PI*2, false);
ctx.closePath();
ctx.fillStyle="blue";
ctx.fill();

</SCRIPT>
</BODY>
</HTML>



Result




About Codingwelove

Codingwelove
Recommended Posts × +

0 comments:

Post a Comment