HTML5 canvas with dynamic user input

Question

I will start off by admitting I have never used canvas before so I don't know if this is possible but I can't seem to find the solution.

I am trying to create a canvas that draws a simple regular polygon shape (all sides are equal) in canvas based on the number of sides and size of the polygon that the user inputs most likely in HTML/PHP form. Nothing is actually saved to a server or database, just used for the one drawing.

Does anyone have any advice?

Alex W · Answer 1 · 2016-08-05T14:56:43.147

3

You should use a JavaScript library to make it easier to draw on the canvas.

Here's a really good demo of the functionality that you're looking for:

http://fabricjs.com/

And the the library is Fabric.js, which you can download here: http://fabricjs.com/

edited Aug 05 '16 at 14:56

answered Jun 30 '12 at 01:38

Alex W

37,233
13
109
109

Looking at the demo, that is exactly what I am looking for! Thank you for such a quick response. I will try it tomorrow when I get on my computer – CampSoup1988 Jun 30 '12 at 01:42

score 1 · Answer 2 · edited May 23 '17 at 12:33

1

I looked up on google and there was an interesting tutorial/code which draws a regular polygon with n-sides & size. So I thought of making a function out of it, one of the technical problems I encountered is that when the canvas is drawed and I click to draw another canvas, the second canvas is "overwritten" on the first one. Luckily someone here solved this problem by clearing the canvas.

So here's my code, you may change it to your needs:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Regular Polygon</title>
</head>
<body>
  <canvas id="regular_polygon" width="400" height="400"></canvas>

  <p>Polygon drawer:</p>
  <p>Number of sides <input type="text" id="nSides"></p>
  <p>Size <input type="text" id="size"></p>
  <p>Color <input type="text" id="color"></p>
  <p>Width <input type="text" id="width"></p>
  <button id="draw">Draw!</button>

  <script type="text/javascript">
    function polygon (element_id, nSides, psize, pcolor, pwidth) {
      var c = document.getElementById(element_id);
      c.width = c.width;
      var cxt = c.getContext("2d");
      var numberOfSides = nSides,
          size = psize,
          Xcenter = c.width/2,
          Ycenter = c.height/2;

      cxt.beginPath();
      cxt.moveTo (Xcenter +  size * Math.cos(0), Ycenter +  size *  Math.sin(0));

      for (var i = 1; i <= numberOfSides;i += 1) {
        cxt.lineTo (
          Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides),
          Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides)
        );
      }

      cxt.strokeStyle = pcolor;
      cxt.lineWidth = pwidth;
      cxt.stroke();
    }

    (function () {
      polygon("regular_polygon", 3, 40, "#000000", 2);
      document.querySelector('#draw').addEventListener('click', function (e) {
        e.preventDefault();
        var nSides = document.querySelector('#nSides'),
            size = document.querySelector('#size'),
            color = document.querySelector('#color'),
            width = document.querySelector('#width');

        polygon("regular_polygon", nSides.value, size.value, color.value, width.value);
      });
    })();
  </script>
</body>
</html>

edited May 23 '17 at 12:33

Community

1
1

answered Jun 30 '12 at 02:57

HamZa

14,671
11
54
75

I tried implementing this script as I liked how it did not require an external javascript file, and I did not need to worry about the extra frills that I did not need in fabricjs, but when I tried adding a circle (arc) to the script, I am now getting a blank canvas. Any suggestions please? Here is my modifications: http://jsfiddle.net/campsoup1988/VGfcz/ – CampSoup1988 Jun 30 '12 at 20:17
I also meant to ask if it is possible to submit the form with just pressing enter when one of the input fields have focus (like in a html/php form) – CampSoup1988 Jun 30 '12 at 20:19
I have not included the polygon working yet, but I manged to get the circle working (and simplified a bit with this script) http://jsfiddle.net/campsoup1988/TeGGx/89/ – CampSoup1988 Jun 30 '12 at 21:49
@CampSoup1988 i don't get it, you asked specifically for a `regular polygon` and now you're asking for some circle stuff, btw circles don't have SIDES so i don't know why you did add that to your last fiddle ... And there seems something wrong, when you draw for the second time it overwrites the last draw (it doesn't refresh before drawing), so here the fix of it : http://jsfiddle.net/QCUYB/ . THAT external JS you were talking about is jQuery and you can download it for free from jquery.com, there are a lot of tutorials to achieve something like "on focus" etc... Have fun ! – HamZa Jun 30 '12 at 23:48
I did not ask for a circle originally because it did not seem hard to do. I plan on putting the polygon inside of the circle. I have use jQuery a few times in the past, mostly for form validation. – CampSoup1988 Jun 30 '12 at 23:56
So is there something else you want to ask ? If not can you validate this answer :) – HamZa Jul 01 '12 at 00:02
@CampSoup1988 btw here is the fix for your first fiddle: http://jsfiddle.net/9WqV3/ , you mistyped/copied cxt with ctx ... – HamZa Jul 01 '12 at 00:05
I am still trying to get both the circle and the polygon drawn at the same time. I cant seem to draw a circle in your script and I cant draw a polygon in mine – CampSoup1988 Jul 01 '12 at 00:06
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/13261/discussion-between-hamza-dzcyberdev-and-campsoup1988) – HamZa Jul 01 '12 at 00:08

HTML5 canvas with dynamic user input

2 Answers2