Drawing arrows of different widths on an HTML page

Question

I want to draw some arrows on the page and this post :

I got WireIt, but the arrow created by wireit has the same width, I want it with different widths.

For instance:

At the beginning of the arrow, its width is 5px, but at the end of the arrow it can be 20px, and the width should increase / decrease between the start and end.

Here are some examples:

And ideas?

---

UPDATE:

Server side:

Using java language, hibernate + struts2. using jsp as the level of presentation.

Pekka: is it possible to run external applications

I'm not quite sure which application should be called in my application. :)

Answer 1

You can create an arrow programmatically using canvas, or canvas.js or legacy support using similar functions for this previous SO question:

Draw an arrow on the canvas tag.

As an alternative, Walter Zorn developed a vector drawing library for JS, which I used to map weather earlier. In the end, the arrow is indeed a polygon that can be represented as a function. Unfortunately, his site does not work, but the library was reflected here.

http://www.c-point.com/javascript_vector_draw.htm

This http://raphaeljs.com/ also seems to be a very useful vector library for JS.

I’m not sure what the SVG option is for you, but it may be in a different way (requires a plugin for IE users).