| <!DOCTYPE html> |
| <html> |
| <head></head> |
| <body> |
| <canvas id="mycanvas" width="300" height="300"></canvas> |
| <script> |
| var canvas = document.getElementById('mycanvas'); |
| var ctx = canvas.getContext('2d'); |
| |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(0, 0, canvas.width, canvas.height); |
| ctx.lineJoin = 'bevel'; |
| ctx.lineWidth = 12; |
| ctx.beginPath(); |
| ctx.ellipse(200, 150, 40, 80, -Math.PI / 6, Math.PI / 2, -Math.PI / 2, false); |
| ctx.ellipse(100, 150, 40, 80, Math.PI / 6, Math.PI / 2, -Math.PI / 2, false); |
| ctx.stroke(); |
| </script> |
| </body> |
| </html> |
