Illustration for paperjs/paper.js#823
The same problem occurs without the use of Paper.js
Illustration for paperjs/paper.js#823
The same problem occurs without the use of Paper.js
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| </style> | |
| <canvas id="canvas" width=960 height=600></canvas> | |
| <script> | |
| var canvas = document.getElementById('canvas'); | |
| var ctx = canvas.getContext('2d'); | |
| ctx.save(); | |
| ctx.transform(1, 0, 0, 1, -1446911830.5, 109); | |
| ctx.save(); | |
| ctx.save(); | |
| ctx.beginPath(); | |
| ctx.moveTo(1446912160, 100); | |
| ctx.lineTo(1446912160, 0); | |
| ctx.lineTo(1446912260, 0); | |
| ctx.lineTo(1446912260, 100); | |
| ctx.lineTo(1446912160, 100); | |
| ctx.closePath(); | |
| ctx.fillStyle = "rgb(255,99,71)"; | |
| ctx.fill("nonzero"); | |
| ctx.restore(); | |
| ctx.save(); | |
| ctx.beginPath(); | |
| ctx.moveTo(1446912170, 50); | |
| ctx.lineTo(1446912170, 0); | |
| ctx.lineTo(1446912220, 0); | |
| ctx.lineTo(1446912220, 50); | |
| ctx.lineTo(1446912170, 50); | |
| ctx.closePath(); | |
| ctx.fillStyle = "rgb(255,0,0)"; | |
| ctx.fill("nonzero"); | |
| ctx.restore(); | |
| ctx.save(); | |
| ctx.beginPath(); | |
| ctx.moveTo(1446912180, 10); | |
| ctx.lineTo(1446912180, 0); | |
| ctx.lineTo(1446912190, 0); | |
| ctx.lineTo(1446912190, 10); | |
| ctx.lineTo(1446912180, 10); | |
| ctx.closePath(); | |
| ctx.fillStyle = "rgb(255,192,203)"; | |
| ctx.fill("nonzero"); | |
| ctx.restore(); | |
| ctx.restore(); | |
| ctx.restore(); | |
| </script> |