| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <body> |
| <script> |
| |
| // Ensures that CanvasRendingContext2D's legacy setLineCap and setLineJoin operations match the behavior of the standard lineCap and lineJoin attributes. |
| |
| var canvas = document.createElement('canvas'); |
| document.body.appendChild(canvas); |
| canvas.setAttribute('width', '700'); |
| canvas.setAttribute('height', '200'); |
| var ctx = canvas.getContext('2d'); |
| |
| ctx.miterLimit = 5; |
| ctx.lineWidth = 15; |
| |
| ctx.fillStyle="rgba(255, 255, 255, 1.0)"; |
| ctx.fillRect(0, 0, 700, 200); |
| |
| ctx.strokeStyle="rgba(0, 0, 0, 1.0)"; |
| ctx.lineJoin = "miter"; |
| ctx.lineCap = "round"; |
| |
| ctx.translate(0, 50); |
| ctx.save(); |
| |
| ctx.beginPath(); |
| ctx.moveTo(10, 100); |
| ctx.lineTo(30, 2); |
| ctx.lineTo(50, 100); |
| ctx.stroke(); |
| |
| ctx.translate(60 ,0); |
| ctx.beginPath(); |
| ctx.moveTo(10, 100); |
| ctx.lineTo(30, 3); |
| ctx.lineTo(50, 100); |
| ctx.stroke(); |
| |
| ctx.translate(90 ,0); |
| ctx.save(); |
| ctx.rotate(0.2); |
| ctx.beginPath(); |
| ctx.moveTo(10, 100); |
| ctx.lineTo(30, 3); |
| ctx.lineTo(50, 100); |
| ctx.closePath(); |
| ctx.stroke(); |
| ctx.restore(); |
| |
| ctx.restore(); |
| |
| ctx.lineJoin = "bevel"; |
| ctx.lineCap = "square"; |
| |
| ctx.translate(200, 0); |
| ctx.save(); |
| |
| ctx.beginPath(); |
| ctx.moveTo(10, 100); |
| ctx.lineTo(30, 2); |
| ctx.lineTo(50, 100); |
| ctx.stroke(); |
| |
| ctx.translate(60 ,0); |
| ctx.beginPath(); |
| ctx.moveTo(10, 100); |
| ctx.lineTo(30, 3); |
| ctx.lineTo(50, 100); |
| ctx.stroke(); |
| |
| ctx.translate(90 ,0); |
| ctx.save(); |
| ctx.rotate(0.2); |
| ctx.beginPath(); |
| ctx.moveTo(10, 100); |
| ctx.lineTo(30, 3); |
| ctx.lineTo(50, 100); |
| ctx.closePath(); |
| ctx.stroke(); |
| ctx.restore(); |
| |
| ctx.restore(); |
| |
| ctx.lineJoin = "round"; |
| ctx.lineCap = "butt"; |
| |
| ctx.translate(200, 0); |
| ctx.save(); |
| |
| ctx.beginPath(); |
| ctx.moveTo(10, 100); |
| ctx.lineTo(30, 2); |
| ctx.lineTo(50, 100); |
| ctx.stroke(); |
| |
| ctx.translate(60 ,0); |
| ctx.beginPath(); |
| ctx.moveTo(10, 100); |
| ctx.lineTo(30, 3); |
| ctx.lineTo(50, 100); |
| ctx.stroke(); |
| |
| ctx.translate(90 ,0); |
| ctx.save(); |
| ctx.rotate(0.2); |
| ctx.beginPath(); |
| ctx.moveTo(10, 100); |
| ctx.lineTo(30, 3); |
| ctx.lineTo(50, 100); |
| ctx.closePath(); |
| ctx.stroke(); |
| ctx.restore(); |
| |
| ctx.restore(); |
| |
| </script> |
| </body> |
| </html> |
