paint2d-paths-ref.html (690B)
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <canvas id ="output" width="300" height="400"></canvas> 5 <script> 6 var canvas = document.getElementById('output'); 7 var ctx = canvas.getContext('2d'); 8 9 ctx.beginPath(); 10 ctx.lineWidth = '10'; 11 ctx.strokeStyle = 'green'; 12 ctx.moveTo(15, 15); 13 ctx.lineTo(135, 15); 14 ctx.lineTo(70, 170); 15 ctx.closePath(); 16 ctx.stroke(); 17 18 var path1 = new Path2D(); 19 path1.moveTo(250, 25); 20 path1.bezierCurveTo(110, 150, 110, 300, 200, 200); 21 ctx.strokeStyle = 'purple'; 22 ctx.setLineDash([ 10, 5 ]); 23 ctx.stroke(path1); 24 25 ctx.fillStyle = 'red'; 26 ctx.beginPath() 27 ctx.arc(75, 325, 50, 0, Math.PI * 2, true); 28 ctx.arc(75, 325, 20, 0, Math.PI * 2, true); 29 ctx.fill('evenodd'); 30 </script> 31 </body> 32 </html>