<?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> 8. 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-canvas08.css" title="style1"/>
      
      
    </head>
    
<body>
  <h1>8. 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[

      function drawMarker(ctx, x, y, width) {
        "use strict;"
        var w2=width*0.5;
        ctx.beginPath();
        ctx.moveTo(x-w2,y-w2);
        ctx.lineTo(x+w2,y+w2);
        ctx.moveTo(x+w2,y-w2);
        ctx.lineTo(x-w2,y+w2);
	 ctx.stroke();
        return;
      }

      var c = document.getElementById("myCanvas");
      if (c.getContext){
      var ctx = c.getContext("2d");
      ctx.beginPath();
      var x1=230;
      var y1=30;
      var x2=150;
      var y2=70;
      var xStart = 50;
      var yStart=20;
      var xEnd = 50;
      var yEnd=100;
      ctx.moveTo(xStart,yStart);
      ctx.bezierCurveTo(x1, y1, x2, y2, xEnd, yEnd);
      ctx.stroke();
      ctx.strokeStyle="green";
      // start point
      ctx.strokeStyle="blue";
      drawMarker(ctx, xStart, yStart, 20);
      ctx.strokeStyle="red";
      drawMarker(ctx, xEnd, yEnd, 20);
      // 1. Kontrollpunkt
      ctx.lineWidth=2;
      ctx.strokeStyle="green";

      drawMarker(ctx, x1, y1, 20);

      // 2. Kontrollpunkt
      drawMarker(ctx, x2, y2, 20);
      }
      else {
        alert("No support for canvas");
      }
      // ]]>
    </script>
    
    
  </body>
  
</html>







