'im trying to get JQuery to work and I dont know what im doing wrong

So I'm made an HTTP app on vs using ASp.Net web application(.Net Framework) I'm trying to make an app that makes shapes and colors them in using JQuery this is my aspx file I do not know what part is broken I know it not the styles. The button does not draw any shapes and the other button i don't know if they work because it will not make a shape `

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQCanvas.aspx.cs" Inherits="Assignment_8.JQCanvas" %>

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery Canvas Project</title>
<link href="https://fonts.googleapis.com/css2?family=Neonderthaw&display=swap" rel="stylesheet">

<link href="Styles/Main.css" rel="stylesheet" />
<style type="text/css">
    
   p {
        font-size: 1.6em;
    }

    canvas {
        border: 1px solid black;
        margin: 20px;
    }
</style>
<script src="Scripts/jquery-3.6.0.js"></script>
<script type="text/javascript">
    $(window).on("load", function () {
        var canvas1 = $(canvas_1)[0];
        var context1 = canvas1.getContext('2d');
        var canvas2 = $(canvas_2)[0];
        var context2 = canvas2.getContext('2d');
        //Canvas Dimensions
        $("#CanvasHeight,#CanvasWidth").change(function () {
            var canvasY = $(CanvasHeight).val();
            var canvasX = $(CanvasWidth).val();
            $(canvas1).attr({
                height: canvasY,
                width: canvasX
            });
        });
        //Signature
        context2.clearRect(0, 0, canvas2.width, canvas2.height);
        context2.font = "20pt 'Neonderthaw display' ";
        context2.fillText("Tim Chenoweth", 0.30)
        $(sig).on("click", function () {
            $(canvas2).slideToggle("slow");
        });

        //button
        $(Button).on("click", function () {
            var canvasX = canvas1.width / 2;
            var canvasY = canvas1.height / 2;
            var color = $("input[name=color]:checked").val();
            var shape = $("input[name=shape]:checked").val();
            context1.fillStyle = color;
            if (shape = "rectangle") {
                var rectWidth = $(rect_Width).val();
                var rectHeight = $(rect_Height).val();

                var Xcord = canvasX - (rectWidth / 2);
                var Ycord = canvasY - (rectHeight / 2);

                context1.clearRect(0, 0, canvas1.width, canvas1.height);
                context1.fillRect(Xcord, Ycord, rectWidth, rectHeight);

            } else if (shape == "circle") {

                var radius = $(circle_radius).val();

                context1.clearRect(0, 0, canvas1.width, canvas1.height);
                context1.beginPath();
                context1.arc(canvasX, canvasY, radius, 0, 2 * Math.PI, false);
                context1.fill();
                context1.stroke();
                context1.closePath();

            } else {
                var baseWidth = $(base_Width).val();
                var triHeight = $(base_Height).val();
                context1.clearRect(0, 0, canvas1.width, canvas1.height);
                context1.beginPath();
                context1.moveTo(centerX - (baseWidth / 2), canvasY + (triHeight / 2));
                context1.lineTo(centerX + (baseWidth / 2), canvasY + (triHeight / 2));
                context1.lineTo(canvasX, canvasY - (triHeight / 2));
                context1.fill();
                context1.closePath();

            }
        });
    });
</script>
</head>
<body>
<form id="form1" runat="server">
    <div id="form">
        <h1>Canvas JQuery App</h1>
        <p>
            <label for="CanvasWidth">Canvas Width:</label>
            <input type="text" id="CanvasWidth" size="5" value="200" />
            <br />
            <label for="CanvasHeight">Canvas Height:</label>
            <input type="text" id="CanvasHeight" size="5" value="200" />
            <p>
                <%--Retangle--%>
                <span style="text-decoration: underline">Shape</span>
                <br />
                <label for="rectangle">Rectangle:</label>
                <input type="radio" id="rectangle" name="shape" value="rectangle" checked="checked" />
                <br />
                <label for="rect_Width">Width</label>
                <input type="text" id="rect_Width" size="5" value="100" />
                <label for="rect_Height">Height:</label>\
                <input type="text" id="rect_Height" size="5" value="100" />
                <br />
                <br />
                <%--Circle--%>
                <label for="circle">Circle:</label>
                <input type="radio" id="circle" name="shape" value="circle" />
                <br />
                <label for="circle_radius">Radius</label>
                <input type="text" id="circle_radius" size="5" value="50" />
                <br />
                <br />
                <%--Triandle--%>
                <label for="triangle">Triangle:</label>
                <input type="radio" id="traingle" name="shape" value="triangle" />
                <br />
                <label for="base_Width">Base Width:</label>
                <input type="text" id="base_Width" size="5" value="100" />
                <label for="tri_Height">Height</label>
                <input type="text" id="tri_Height" size="5" value="100" />

            </p>
            <br />
            <p>
                <span style="text-decoration: underline">Color</span>
                <br />
                <label for="black">Black</label>
                <input type="radio" id="black" name="color" value="black" checked="checked" />
                <label for="blue">Blue</label>
                <input type="radio" id="blue" name="color" value="blue" />
                <label for="red">Red</label>
                <input type="radio" id="red" name="color" value="red" />
                <label for="green">Green</label>
                <input type="radio" id="green" name="color" value="green" />

            </p>
        </p>
        <br />
        <p style="text-align: center">
            <input type="button" class="button" id="Button" value="Draw Shape" />
        </p>
        <p>
            <input type="checkbox" id="siq" />
            <label for="sig">Singnature</label>
        </p>
    </div>
</form>
<div style="float: left">
    <canvas id="canvas_1" height="200" width="200"></canvas>
    <canvas style="display: block; margin-top: -20px; border: none;" id="canvas_2" height="75" width="300"></canvas>
</div>
<div style="font-family: 'Neonderthaw display';">.</div>
</body>
</html>

`

htmlhttp


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions