Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. 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.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

JavaScript Creating my first drawing app mouse move direction

Samantha Groves

Samantha Groves

Coder
Hi I want to create my own drawing app in HTML,CSS and Javascript.I am familiar with C# and Windows Forms Apps and how keyboard or mouse inputs work there:

I have this HTML code:

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");

    function red() {

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

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


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

        c.color = color;

        

        c.moveTo(x1,y1);

        c.lineTo(x2,y2);

        c.stroke();


    }

    function mouseDown()
    {
        mouseDownVar = 1;


    }

    canvas.onmousemove = function mouseMove(e)
    {
        if(mouseDownVar==1)
        {
            drawLine(e.x,e.y,e.x-10,e.y-10);



        }


    }





</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:aliceblue; width:1024px; height:512px;position:fixed;top:100px;left:0" onmousedown="mouseDown()">




</canvas>

and it doesnt work.I have several questions:

a)The canvas element is simply a container for graphics in order to draw something , you need Javascript.So what does the .stroke() function do?Does it update the graphics?

Unless we call it , the output isnt updated right?

And b)How does the mouse event work?Im suprised it didnt work because I used to do similarly in WPA application.A boolean value must hold the value if any mousekey is pressed and if that constant is true ( or '1' in my case) then you can draw.
 
Sort by date Sort by votes
.stroke() makes lines of path drawn. like begin path move to, line to, end path makes one line and .stroke draws it. I think what you need is to set mouseDownVar on mouse down. You have to have a mouseDown event listener on a view like canvas otherwise it is just a function. Mouse events work like mouse down event for mouse down, its own function, mouse move event, only for motion, not up or down, its own function, mouse up event, when click happens, its own function. I recommend you use canvas.addEventListener. It is almost universal and canvas.onmousemove is not though it works on some browsers. I see now you have all event listeners there. Are you clicking a color before drawing? This seems like it should work. Maybe check console for errors. One other thing to note is that there are some different ways to have x and y. There is client(X or Y), page(X or Y) and straight x or y. Maybe use console.log to find what your x and y are.

Also, you are getting canvas before it is loaded so maybe either put that script after canvas or do a wait for content to be loaded thing. You should be able to check value of canvas and it seems it may be null or undefined. X E.
 
Last edited:
Upvote 0 Downvote
JosiahMaybe said:
.stroke() makes lines of path drawn. like begin path move to, line to, end path makes one line and .stroke draws it. I think what you need is to set mouseDownVar on mouse down. You have to have a mouseDown event listener on a view like canvas otherwise it is just a function. Mouse events work like mouse down event for mouse down, its own function, mouse move event, only for motion, not up or down, its own function, mouse up event, when click happens, its own function. I recommend you use canvas.addEventListener. It is almost universal and canvas.onmousemove is not though it works on some browsers. I see now you have all event listeners there. Are you clicking a color before drawing? This seems like it should work. Maybe check console for errors. One other thing to note is that there are some different ways to have x and y. There is client(X or Y), page(X or Y) and straight x or y. Maybe use console.log to find what your x and y are.

Also, you are getting canvas before it is loaded so maybe either put that script after canvas or do a wait for content to be loaded thing. You should be able to check value of canvas and it seems it may be null or undefined. X E.
Click to expand...
I have solved it!When you want information related to the event you must call it like this in the <script> tag:

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

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

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

                    
                }


            }


        }
    );

while if not any info related to the event are of interest you can call in the object's html code and point to the script tag of course.
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me 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