Matteo Mattei

Hello, my name is Matteo Mattei and this is my personal website. I am computer engineer with a long experience in Linux system administration and web software development.

linkedin rss twitter google+ github facebook

jPolygon

jPolygon is a javascript library that allows drawing a polygon in a HTML5 canvas over an image. It supports undo and clear funcions. To finalize the polygon press CTRL + mouse Click.

Technologies used:

  • pure javascript (no jQuery, etc…)
  • HTML5 canvas

Requirements:

  • Any browser that supports HTML5 canvas

Main Features:

  • Mark points with a square.
  • Undo function implementation.
  • Clear function implementation.
  • When a polygon is created, fill the content with a transparent color.

License:

  • MIT license

URL:

  • Project sources are hosted on Github
  • A live demo is available here

USAGE:

Include the jPolygon.js script just before the </body>:

        <script type="text/javascript" src="jPolygon.js"></script>
    </body>

Then in your body put at least the following elements:

  • a canvas tag with the following attributes:
    • id=”jPolygon”.
    • specify width and height.
    • add data-imgsrc=”image.jpg”. The image can also be a remote or local URL.
    • onclick callback: onclick=”point_it(event)”.
  • a textarea with id=”coordinates”.
  • a button for undo with undo() callback.
  • a button for clear with clear_canvas() callback.
<canvas id="jPolygon" width="640" height="480" data-imgsrc="image.jpg" onclick="point_it(event)">
    Your browser does not support the HTML5 canvas tag.
</canvas>
<button onclick="undo()">Undo</button>
<button onclick="clear_canvas()">Clear</button>
<textarea id="coordinates" disabled="disabled" style="width:300px; height:200px;"></textarea>

Then load the image over the canvas using the onload callback in the open body tag:

<body onload="clear_canvas()">
comments powered by Disqus