Home/ Questions/Q 7007645
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T21:38:02+00:00

Have a simple drawing application. The problem is in the coordinates ( redraw function):

  • 0

Have a simple drawing application. The problem is in the coordinates (redraw function): they must be mouse, but are near 2x mouse. What’s the problem in the code?

<html>
<head>
    <style type="text/css" media="screen">
body{
    background-color: green;
}

#workspace{
    width: 700px;
    height:420px;
    margin: 40px auto 20px auto;
    border: black dashed 1px;
}

#canvas{
    background: white;
    width: 100%;
    height: 100%;
}
    </style>
<script type="text/javascript" src="jquery-1.7.1.js"></script> 
<script type="text/javascript">
$(document).ready(
    function() {
        var context = document.getElementById('canvas').getContext("2d");
        var clickX = new Array();
        var clickY = new Array();
        var clickDrag = new Array();
        var paint;

        $('#canvas').mousedown(function(e){
            var mouseX = e.pageX - this.offsetLeft;
            var mouseY = e.pageY - this.offsetTop;
            paint = true;
            addClick(mouseX,mouseY, false);
            redraw();
        });

        $('#canvas').mousemove(function(e){
            if(paint){
                addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
                redraw();
            }
        });

        $('#canvas').mouseup(function(e){
            paint = false;
        });

        $('#canvas').mouseleave(function(e){
            paint = false;
        });

        function addClick(x, y, dragging)
        {
            clickX.push(x);
            clickY.push(y);
            clickDrag.push(dragging);
        }

        function redraw(){
            canvas.width = canvas.width; // Clears the canvas

            context.strokeStyle = "#df4b26";
            context.lineJoin = "round";
            context.lineWidth = 5;

            for(var i=1; i < clickX.length; i++)
            {
                context.beginPath();
                if(clickDrag[i] && i){
                    context.moveTo(clickX[i-1], clickY[i-1]);
                }else{
                    context.moveTo(clickX[i], clickY[i]);
                }
                context.lineTo(clickX[i], clickY[i]);
                context.closePath();
                context.stroke();
            }

            console.log(clickX[clickX.length-1]+" "+clickY[clickX.length-1]);
        }
    });
</script>
</head>
<body>
<div id="workspace">
<canvas id="canvas"/>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should not set a canvas’ width/height through CSS. It makes the canvas stretch instead of making the resolution higher. This means that although the coordinates are correct, they will visually end up somewhere else.

    For example, an x coordinate of 100 will be stretched to visually be an x coordinate of 200 (or something else; at least it will be bigger than 100 since it’s been stretched).

    Instead, use:

    <canvas id="canvas" width="700" height="420" />

    and remove the width: 100% in CSS.

    http://jsfiddle.net/euXJC/1/

    • 0