Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript HTML canvas isnt working properly(I cant draw anything on the screen)

Samantha Groves

Samantha Groves

Coder
Hello I have this code and it is supposed to be a drawing app with the ability to choose between up to 3 colors:

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Draw a picture</title>
</head>
<body>

<script>

    let color = "";

    let mouseDownVar = 0;

    const canvas = document.getElementById("myCanvas");



    window.addEventListener("mousemove",(e)=>

        {
            if(e.clientX<1024)
            {
                if(e.clientY>100&&e.clientY<612)
                {
                    if(mouseDownVar)

                    console.log(e.clientX + ":" + (e.clientY - 100));

                    drawLine(e.clientX,e.clientY-100,e.clientX+10,e.clientY-90);
                }


            }


        }
    );



    function red() {

        color = "#FF0000";
        
    }
    function green()
    {
        color = "#00FF00";

    }
    function blue()
    {
        color = "#0000FF";

        drawLine(10,10,1000,1000);


    }
    function drawLine(x1,y1,x2,y2)
    {
        c = canvas.getContext("2d");

        c.color = color;



        c.beginPath();



        c.moveTo(x1,y1);

        c.lineTo(x2,y2);



        c.stroke();



        c.closePath();


    }

    function mouseDown()
    {
        mouseDownVar = 1;

        console.log(1);




    }
    function mouseUp()
    {
        mouseDownVar=0;

        console.log(0);

    }







</script>

<button style="background-image:url(circle-64.jpg);height:64px;width:64px; border-color:whitesmoke;border-radius:96px;position:fixed;top:0;left:0;" onclick="red()"></button>

<button style="background-image:url(circle-64B.jpg);height:64px;width:64px; border-color:whitesmoke;border-radius:96px;position:fixed;top:0;left:100px;" onclick="blue()"></button>


<button style="background-image:url(circle-64G.jpg);height:64px;width:64px; border-color:whitesmoke;border-radius:96px;position:fixed;top:0;left:200px;" onclick="green()"></button>

<canvas id="myCanvas" style="background-color:white; width:1024px; height:512px;position:fixed;top:100px;left:0" onmousedown="mouseDown()" onmouseup="mouseUp()">




</canvas>


The conversion of the coordinates is correct ,the problematic part is this:

Code: 
    function drawLine(x1,y1,x2,y2)
    {
        c = canvas.getContext("2d");

        c.color = color;



        c.beginPath();



        c.moveTo(x1,y1);

        c.lineTo(x2,y2);



        c.stroke();



        c.closePath();


    }

which I dont know why this is the case since it is a copypasta from the Internet.Help me out please!
 
Sort by date Sort by votes
It would be nice to see the code without so many blank lines.
Looks like the body and html are not being terminated. Probably not the problem but should be corrected.
Not sure what exactly this code is supposed/expected to do but have you checked the Console Log for errors ?
 
Upvote 0 Downvote
Samantha Groves said:
the console log gives the correct coordinates
Click to expand...
Well that is nice. But is that enough to make it work, you think ? Have you not noticed you get an error in the console log with every mouse move, and stopped to think why that might be so ?
The first problem here is that you have
const canvas = document.getElementById("myCanvas");
at the start of your script. At that moment in time, the page has not been rendered yet, so you have no canvas. You need to define canvas as a var (not a const and not initializing it), then assign the value once the page has been loaded. There are several ways to do that, the easiest is to add an onLoad trigger to the body and get the canvas there. It might be smart to also get the graphics context there, instead of every time you want to draw.

The second problem is that you seem to be missing a pair of brackets here
JavaScript: 
if(e.clientY>100&&e.clientY<612)
                {
if(mouseDownVar)

console.log(e.clientX + ":" + (e.clientY - 100));

drawLine(e.clientX,e.clientY-100,e.clientX+10,e.clientY-90);
so that it will try to draw even when the mouse button is not down. This is probably not what you want.

HTH
 
Upvote 1 Downvote
Yes, I think it is that you are having canvas as null or undefined because that script has it initialized before it is there to get. Either wait with DOMContentLoaded event listener on window and initialize then or move script to after that canvas. X E.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom