CODEWITHSUNDEEP
javascriptcanvas
Ryan Miles
Ryan Miles

Reputation: 309

Javascript canvas, drawing at wrong coordinates

I am reading and printing the mouse coordinates correctly in my "mousePos" header But when I draw on the canvas, using the same exact coordinates, by clicking and dragging, I am drawing to far to the bottom and to far to the right. I can fix this by not using style.canvas.width="512px", but then I can not set the size. The size must be 512 by 512.

Any tips?

    
        var resize =1;
        var mouseX, mouseY;
        var pen = "?";
        var canvas = document.getElementById('canvas');
        var menu = document.getElementById('menu');
        var ctx = canvas.getContext('2d');
        var fill = "#FF0000";  //Red
    
        canvas.style.width="512px";
        canvas.style.height="512px";
    
        menu.style.width="512";
        menu.style.height="512";
    
        canvas.addEventListener("mousedown", penDown);
        canvas.addEventListener("mouseup", penUp);
    
        function mouseMove(event) {
            mouseX = event.clientX - ctx.canvas.offsetLeft;
            mouseY = event.clientY - ctx.canvas.offsetTop;
            document.getElementById('mousePos').innerHTML = "Mouse Position: X" + mouseX + " Y" + mouseY;
    
            if(pen == "down") {
                ctx.fillRect(mouseX, mouseY, 4, 4);
            }
        }
    
        function penDown() {
            pen = "down";
            //alert("pen = " + pen + " mouse pos:" + mouseX + "," + mouseY);
        }
    
        function penUp() {
            pen = "up";
           // alert("pen = " + pen + " mouse pos:" + mouseX + "," + mouseY);
        }
    
        function backGround() {
            //alert("Called backGround");
            canvas.style.backgroundColor = document.getElementById('BackGround').value;
        }
    
        function penColor(){
            //alert("Called penColor");
            fill = document.getElementById('PenColor').value;
            ctx.fillStyle = fill;
        }
    
        /*
    
            questions:
                Why is my pen not drawing at the mousepos?
    
                use addEventListener or onEvent?
    
                call script when body loads(onDOMcontentLoaded), or call function from script(onload="init()")
    
                Am I taking the right approach, or am I coding myself into a corner?
    
                Any other tips?
        */
    
    
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Canvas Test 3</title>
        <script>
        </script>
    </head>
    
    <body bgcolor="#20b2aa">
    
    <canvas id="canvas" style="position: absolute;
             border: 2px solid black; background-color: white"
            onmousemove="mouseMove(event)">
    </canvas>
    
    <div id="menu" style="position: absolute; right: 20%;
                background-color: lightcoral; border: 2px solid black;">
        <p> Back Ground:
            <select id="BackGround" onchange="backGround();">
                <option value="white">white</option>
                <option value="black">black</option>
                <option value="red">red</option>
                <option value="blue">blue</option>
                <option value="green">green</option>
                <option value="yellow">yellow</option>
                <option value="orange">orange</option>
                <option value="purple">purple</option>
            </select>
        </p>
        <p> Pen Color:
            <select id="PenColor" onchange="penColor()">
                <option value="#000000">black</option>
                <option value="#FFFFFF">white</option>
                <option value="#FF0000">red</option>
                <option value="#0000CC">blue</option>
                <option value="#006600">green</option>
                <option value="#FFFF00">yellow</option>
                <option value="#FF3300">orange</option>
                <option value="#990099">purple</option>
            </select>
        </p>
    </div>
    
    <h2 id="mousePos" style="position: absolute; bottom: 5%">Mouse Position | </h2>
    
    </body>
    </html>

Upvotes: 3

Views: 6742

Answers (1)

halex
halex

Reputation: 16403

You have to add the attributes width and height to your canvas. These properties should be the same you set the respective css properties.

See Canvas is stretched when using CSS but normal with "width" / "height" properties for more information on this.

Change 

<canvas id="canvas" style="position: absolute; border: 2px solid black; background-color: white" onmousemove="mouseMove(event)">

to

<canvas id="canvas" width="512" height="512" style="position: absolute; border: 2px solid black; background-color: white" onmousemove="mouseMove(event)">

Upvotes: 14

Related Questions