Home/ Questions/Q 8322107
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T23:15:57+00:00

My code is using a canvas that allows people to draw whatever they want,

  • 0

My code is using a canvas that allows people to draw whatever they want, what I’m trying to implement is changing the color of what their coloring on button click, default color is black I have two buttons to change ot red and green and also a clear canvas button, none of these seems to operate on button click however.

<h3>Draw Something</h3>
<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Paint Canvas</title>
   <style type="text/css">
   <!--
     #container { position: relative; }
     #imageView { border: 1px solid #000; }
   -->
   </style>

</head>

<body>

    <div id="container">
        <canvas id="imageView" width="600" height="300">
               </p>
        </canvas>
    </div>

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

</html>

<body >
    <input type= "button" value= "Green" id= "green" onclick= "GreenRect()" />

    <input type= "button" value= "Red" id= "red" onclick= "RedRect()" />

        <input type= "button" value= "clear canvas" 
                 id= "clear" onclick= "ImgClr()" />


        <button id="howdy">Howdy!</button><br>
</body>
    function GreenRect () {
        context.strokeStyle= 'green';
        context.stroke();
        }

        function RedRect () {
        context.strokeStyle= 'red';
        context.stroke();
        }

        function ImgClr () {
        context.clearRect(0,0, 600, 300);  
        }
        </script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You did have a lot of mis-formed html, like a second <body> tag as well as a </html> half way through your code, either of which would have completely confused a browser as you can see by Firefox’s noble attempt to make sense of your code:

    <html lang="en"><head></head><body><h3>Draw Something</h3>
   <meta charset="utf-8">
   <title>Paint Canvas</title>
   <style type="text/css">
   <!--
     #container { position: relative; }
     #imageView { border: 1px solid #000; }
   -->
   </style>
    <div id="container">
        <canvas id="imageView" width="600" height="300">
               <p></p>
        </canvas>
    </div>
    <script type="text/javascript" src=".js"></script>

    <input type="button" value="Green" id="green" onclick="GreenRect()">
    <input type="button" value="Red" id="red" onclick="RedRect()">
    <input type="button" value="clear canvas" id="clear" onclick="ImgClr()">
    <button id="howdy">Howdy!</button><br>

    function GreenRect () {
        context.strokeStyle= 'green';
        context.stroke();
    }

    function RedRect () {
        context.strokeStyle= 'red';
        context.stroke();
    }

    function ImgClr () {
        context.clearRect(0,0, 600, 300);  
    }
</body></html>

    Also there is:

    1. an <h3> tag outside of your <body> tag
    2. your javascript at the bottom of your original code is outside of the <body> and <head> tags as well as lacking an opening <script> tag.
    3. <p></p> tags within your canvas tags that don’t seem to be doing anything.

    I’d strongly recommend not looking at my code below, but first just trying to clean up your html according to the comments I’ve made about it. I think you would get a lot out of doing that for yourself.

    <!DOCTYPE html>

<html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Paint Canvas</title>

      <script type="text/javascript">
        //declare global namespace
        this.DGN = {
            prep: undefined,
            context: undefined,
            greenRect: undefined,
            redRect: undefined,
            imgClear: undefined,
            smileyFace: undefined
        };

        DGN.prep = function(){
        if(typeof DGN.context === "undefined") {
            var canvas = document.getElementById('imageView');

                if (canvas.getContext){
                    DGN.context = canvas.getContext('2d');
              } 
           }
        };


        DGN.greenRect = function  () {
            DGN.prep();

            DGN.context.strokeStyle = 'green';
            DGN.context.stroke();
        };


        DGN.redRect = function  () {
            DGN.prep();

            DGN.context.strokeStyle = 'red';
            DGN.context.stroke();
        };


        DGN.imgClear = function () {
            DGN.prep();

            DGN.context.clearRect(0, 0, 600, 300);  
        };


        DGN.smileyFace = function () {
            DGN.prep();

            console.log(DGN.context);
            DGN.context.beginPath();  
            DGN.context.arc(75,75,50,0,Math.PI*2,true); // Outer circle  
            DGN.context.moveTo(110,75);  
            DGN.context.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise)  
            DGN.context.moveTo(65,65);  
            DGN.context.arc(60,65,5,0,Math.PI*2,true);  // Left eye  
            DGN.context.moveTo(95,65);  
            DGN.context.arc(90,65,5,0,Math.PI*2,true);  // Right eye  
            DGN.context.stroke();
        };


        </script>

    </head>
    <body>
        <h3>Draw Something</h3>
        <div id="container">
            <canvas id="imageView" width="600" height="300">
            </canvas>
        </div>

        <input type="button" value="Green"        id="green"      onclick= "DGN.greenRect()" />
        <input type="button" value="Red"          id="red"        onclick= "DGN.redRect()" />
        <input type="button" value="clear canvas" id="clear"      onclick= "DGN.imgClear()" />
        <input type="button" value="Smiley Face"  id="smileyFace" onclick= "DGN.smileyFace()" />

    </body>
</html>
    • 0