Hochwertiger HTML5 und Javascript Code von dem Designbüro Standardabweichung aus München

//Initialisierung context.lineWidth = 1; context.lineJoin = 'miter'; //'bevel' 'round' context.lineCap = 'butt'; //'square' 'round' context.miterLimit = 10; //verhindert einen zu spitzen lineJoin bei der option 'miter' context.strokeStyle = '#FF0000'; //rgb(255,0,0), rgba(255,255,255,0.5), pattern, gradient context.fillStyle = '#FF0000'; //rgb(255,0,0), rgba(255,255,255,0.5), pattern, gradient //LINIEN context.beginPath(); //Start //Line 1 von x100, y100 nach x200, y100 context.moveTo(100, 100); //moveTo(x,y) context.lineTo(200, 100); //lineTo(x,y) //Line 2 von x150, y150 nach x300, y300 nach x150, y300 context.moveTo(150, 150); //moveTo(x,y) context.lineTo(300, 300); //lineTo(x,y) context.lineTo(150, 300); //lineTo(x,y) //Linie 3 ... context.stroke(); //Zeichne Pfad mit den in strokeStyle definierten Eigenschaften //POLYGONE //Dreieck von x100, y100 nach x200, y100 nach x150, y200 context.beginPath(); //Start context.moveTo(100, 100); //moveTo(x,y) context.lineTo(200, 100); //lineTo(x,y) context.lineTo(150, 200); //lineTo(x,y) context.closePath(); // == lineTo(100,100) context.stroke(); //Zeichne Pfad mit den in strokeStyle definierten Eigenschaften context.fill(); //Fülle Pfad mit den in fillStyle definierten Eigenschaften