| <!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> |