transformed-path.html 463 B

12345678910111213141516171819202122
  1. <html>
  2. <body>
  3. <canvas width="500" height="500"></canvas>
  4. <script>
  5. var canvas = document.getElementsByTagName('canvas')[0];
  6. var ctx = canvas.getContext('2d');
  7. ctx.scale(0.5, 0.5);
  8. ctx.translate(41, 41.);
  9. ctx.rect(0, 0, 100, 100);
  10. ctx.translate(100, 0);
  11. ctx.moveTo(0,0);
  12. ctx.quadraticCurveTo(100, 100, 200,0);
  13. ctx.translate(200, 0);
  14. ctx.moveTo(0,0);
  15. ctx.bezierCurveTo(100, 100, 200, -100, 300,0);
  16. ctx.stroke();
  17. </script>
  18. </body>
  19. </html>