HTML and CSS Reference
In-Depth Information
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:
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”);
Search WWH ::

Custom Search