Welcome to collectivesolver - Programming & Software Q&A. A website you can trust. All programs tested and works. Contact: aviboots(AT)netvision.net.il
Liquid Web Managed Dedicated Server: RAID 1 SSD with 16GB of RAM minimum! 24/7 On-Site Heroic Support! Industry-Leading SLA!

BlueHost Web Hosting

Ecommerce Software - Best Ecommerce Platform Made for You - Free Trial

Ecommerce Software - Best Ecommerce Platform Made for You - Free Trial

getflywheel wordpress hosting


Liquid Web Cloud VPS Hosting

8,361 questions

11,615 answers

573 users

How to draw, fill circle and write text in HTML5 and JavaScript

1 Answer

0 votes
<canvas id="myCanvas" width="200" height="200" style="border: #000000;">
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
// canvas.getContext("2d") returns an object with methods and properties for drawing on the 
// canvas: circles, text, boxes, lines, and more.
var context = canvas.getContext("2d");

context.beginPath();
// context.arc(x, y, r, sAngle - Start, eAngle - End, counterclockwise - Optional);
context.arc(120, 90, 50, 0, 2 * Math.PI);

// context.fillStyle= color|gradient|pattern;
context.fillStyle = 'green';
context.fill();
context.font = "20px Arial";
// fillText(text, x, y, maxWidth - Optional);
context.fillText("Circle", 95, 30);

context.fillStyle = 'red';
context.fill();
context.lineWidth = 3;
// context.strokeStyle = color|gradient|pattern;
context.strokeStyle = '#00ff00';
context.font = "20px Arial";
context.fillText("Circle", 95, 170);
context.stroke();
</script>



answered May 21, 2014 by avibootz
edited May 21, 2014 by avibootz
...