locked
Drawing shapes into Canvas RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User1815172110 posted

    Hi,

    I need to draw some shape into canvas like triangle, circle etc... When I research this on web, I found that we can draw shapes into canvas by using javascript, like below.

    <div>
        <canvas id="mycanvas" width="100" height="100">
        </canvas>
    </div>

    $(function () {
    var canvas = document.getElementById('mycanvas');
    var context = canvas.getContext('2d');
    context.fillRect(30, 30, 70, 90);
    });

    But the problem is, when a button clicked, I need to generate shape on the server side than return it back to canvas as I callback result.

    Should I generate my shape object on the server side and get this object from js function? Can you give me an idea about it?

    Thanks in advance.

    Sunday, October 27, 2019 1:49 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    But the problem is, when a button clicked, I need to generate shape on the server side than return it back to canvas as I callback result.

    Should I generate my shape object on the server side and get this object from js function? Can you give me an idea about it?

    In web application the server creates dynamic HTML and JavaScript that is returned to the browser which the browser uses to display the UI.  It is up to you to return a View that has the HTML and JavaScript needed to create the UI.   

    You can also create dynamic HTML by creating a JavaScript application that runs in the browser.  This approach requires XHR (AJAX or fetch) to invoke server side Actions.

    Sunday, October 27, 2019 1:59 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-474980206 posted

    There a two common approaches depending on you needs.

    1. design a graphic language for you app. The server “draws” the object in this language and sends the code to the JavaScript. The JavaScript then interprets the code and draws in the canvas. This is common for charts, where just data points, and text can be sent. 

    2. The server produces an image (png or jpeg) that it sends to JavaScript, and JavaScript load into an image or canvas.
    Sunday, October 27, 2019 3:32 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User665608656 posted

    Hi johnryder,

    Should I generate my shape object on the server side and get this object from js function? Can you give me an idea about it?

    No, I don't recommend that you generate the graph on the server side, and then get it in js and display it in canvas. It seems to be a superfluous act.

    You can implement your functions directly in JS.

    But the premise is, I need to know how you click button to generate graphs. Do you click different buttons to generate different graphs, or do you click a button to randomly generate different graphs?

    Different graphics will bring in different parameters no matter on the server side or js side. What I need to confirm is where do you get these parameters? Is it defined directly in the method or through external input?

    I made a demo to display different graphics through different buttons. You can refer to it:

    <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#Button1").click(function () {
                event.preventDefault();
                var canvas = document.getElementById('mycanvas');
                var context = canvas.getContext('2d');
                context.clearRect(0, 0, canvas.width, canvas.height);
                // the triangle
                context.beginPath();
                context.moveTo(30, 30);
                context.lineTo(100, 300);
                context.lineTo(300, 100);
                context.closePath();
                context.fillStyle = "yellow";
                context.fill();
            });
            $("#Button2").click(function () {
                event.preventDefault();
                var canvas = document.getElementById('mycanvas');
                var context = canvas.getContext('2d');
                context.clearRect(0, 0, canvas.width, canvas.height);
                 // the circle
                context.beginPath();
                context.arc(100, 100, 100, 0, Math.PI * 2, false);
                 context.closePath();
                context.fillStyle = "red";
                context.fill();
            });
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <canvas id="mycanvas" width="500" height="500" style="border: 1px solid black"></canvas><br />
            <asp:Button ID="Button1" runat="server" Text="triangle" />
            <asp:Button ID="Button2" runat="server" Text="cirle" />
        </div>
    </form>
</body>
</html>

    Here is the result of this work demo:

    Best Regards,

    YongQing.

    Monday, October 28, 2019 7:43 AM