third_party/WebKit/LayoutTests/fast/canvas/canvas-ellipse-connecting-line.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head></head>
   4 <body>
   5 <canvas id="mycanvas" width="300" height="300"></canvas>
   6 <script>
   7 var canvas = document.getElementById('mycanvas');
   8 var ctx = canvas.getContext('2d');
   9
  10 ctx.fillStyle = '#0f0';
  11 ctx.fillRect(0, 0, canvas.width, canvas.height);
  12 ctx.lineJoin = 'bevel';
  13 ctx.lineWidth = 12;
  14 ctx.beginPath();
  15 ctx.ellipse(200, 150, 40, 80, -Math.PI / 6, Math.PI / 2, -Math.PI / 2, false);
  16 ctx.ellipse(100, 150, 40, 80, Math.PI / 6, Math.PI / 2, -Math.PI / 2, false);
  17 ctx.stroke();
  18 </script>
  19 </body>
  20 </html>