Draw arrow on canvas tag

by

As simple as I can get it. You’ll have to prepend context.beginPath() and append context.stroke() yourself:

ctx = document.getElementById("c").getContext("2d");
ctx.beginPath();
canvas_arrow(ctx, 10, 30, 200, 150);
canvas_arrow(ctx, 100, 200, 400, 50);
canvas_arrow(ctx, 200, 30, 10, 150);
canvas_arrow(ctx, 400, 200, 100, 50);
ctx.stroke();


function canvas_arrow(context, fromx, fromy, tox, toy) {
  var headlen = 10; // length of head in pixels
  var dx = tox - fromx;
  var dy = toy - fromy;
  var angle = Math.atan2(dy, dx);
  context.moveTo(fromx, fromy);
  context.lineTo(tox, toy);
  context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
  context.moveTo(tox, toy);
  context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
}
<html>

<body>
  <canvas id="c" width="500" height="500"></canvas>


</body>

More Related Contents:

  1. Tainted canvases may not be exported
  2. Resize image with javascript canvas (smoothly)
  3. HTML5 Canvas toDataURL returns blank
  4. Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)
  5. PHP+JS: How to do Fileuploads in HTML Form as Content-Type Multipart (via JS)?
  6. canvas2d toDataURL() different output on different browser
  7. Capture frames from video with HTML5 and JavaScript
  8. Image manipulation and texture mapping using HTML5 Canvas?
  9. How to show a running progress bar while page is loading
  10. What’s the difference between a boolean as primitive and a boolean as property of an object?
  11. dragging and resizing an image on html5 canvas
  12. event.offsetX in Firefox
  13. Draw border around nontransparent part of image on canvas
  14. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  15. addEventListener for keydown on Canvas
  16. How to pixelate an image with canvas and javascript
  17. Draw HTML5/Javascript Canvas Path in Time
  18. Saving canvas to image via canvas.toDataURL results in black rectangle
  19. Resize a Base-64 image in JavaScript without using canvas
  20. Convert HTML5 Canvas into File to be uploaded?
  21. How to flip images horizontally with HTML5
  22. Can I create multiple canvas elements on same page using p5js
  23. canvas getContext(“2d”) returns null
  24. clearing circular regions from HTML5 Canvas
  25. How can I get DPI from image in JS?
  26. How to implement SVG’s preserveAspectRatio=”xMinYMin slice” for canvas drawImage method.
  27. Scaling an image to fit on canvas
  28. True Isometric Projection with HTML5 Canvas
  29. HTML5 Canvas: Get Event when drawing is finished
  30. loading an image on web browser using Promise()

Leave a Comment