<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title> 6. Canvas Beispiel </title>
    <meta name="author" content="Administrator"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css"
      href="html5-canvas06.css" title="style1"/>

      
    </head>
    
<body>
  <h1>6. Canvas Beispiel</h1>
  
  <canvas    id="myCanvas" width="600" height="200"  style="border:1px solid #FF0000;"  >
    Your browser does not support the HTML5 canvas tag.
  </canvas>
      <script type="application/javascript"  >
       // <![CDATA[
        var c = document.getElementById("myCanvas");
        if (c.getContext){
          var ctx = c.getContext("2d");

          ctx.beginPath();
          ctx.arc(100, 100, 75, 0, Math.PI, false);
          ctx.stroke();

          ctx.beginPath();
          ctx.lineWidth=5;
          ctx.arc(300, 100, 75, 0, Math.PI, false);
          ctx.stroke();

          ctx.beginPath();
          ctx.lineWidth=3;
          ctx.strokeStyle="blue";	
          ctx.arc(500, 100, 75, 0, Math.PI, false);
          ctx.fillStyle="red";
          ctx.fill();

          ctx.stroke();

        }
        else {
        alert("No support for canvas");
        }
      // ]]>
      </script>
  
  
</body>

</html>





