Integrating advanced Design elements - HTML5 - page 259

myCanvas_context.beginPath();
myCanvas_context.arc(150,150,100,0,Math.PI*2,true);
myCanvas_context.closePath();
myCanvas_context.stroke();
myCanvas_context.fill();
}
</script>
Although you can't see the color in Figure 28-7, this code draws a very sunny yellow circle, with a
black border. The key bit of code for rendering a complete circle is in the arc() function:
myCanvas_context.arc(150,150,100,0,Math.PI*2,true);
FiGure 28-7
The first two values are the center point, followed by the radius ( 100 ). The next two values are the
starting point, 0 , and ending point, Math.PI*2 , for the arc. As I mentioned, JavaScript includes a
library of math functions that you can rely on, which the calculation Math.PI*2 takes advantage of.
adding Text to a canvas
The <canvas> tag isn't just for graphical shapes — you can incorporate text wherever you'd like on
your canvas. What's more, you can define the font family, size, weight, and line-height as well as
color (both stroke and fill — separately, if you'd like). Here's an example that places “Welcome” in
the middle of the yellow circle:
<script type=”text/javascript”>
function doCanvas() {
var my_canvas = document.getElementById(“myCanvas”);