Draw on Html5 Canvas Using a Mouse

Draw on HTML5 Canvas using a mouse

Here is a working sample.

 <html>    <script type="text/javascript">    var canvas, ctx, flag = false,        prevX = 0,        currX = 0,        prevY = 0,        currY = 0,        dot_flag = false;
    var x = "black",        y = 2;        function init() {        canvas = document.getElementById('can');        ctx = canvas.getContext("2d");        w = canvas.width;        h = canvas.height;            canvas.addEventListener("mousemove", function (e) {            findxy('move', e)        }, false);        canvas.addEventListener("mousedown", function (e) {            findxy('down', e)        }, false);        canvas.addEventListener("mouseup", function (e) {            findxy('up', e)        }, false);        canvas.addEventListener("mouseout", function (e) {            findxy('out', e)        }, false);    }        function color(obj) {        switch (obj.id) {            case "green":                x = "green";                break;            case "blue":                x = "blue";                break;            case "red":                x = "red";                break;            case "yellow":                x = "yellow";                break;            case "orange":                x = "orange";                break;            case "black":                x = "black";                break;            case "white":                x = "white";                break;        }        if (x == "white") y = 14;        else y = 2;        }        function draw() {        ctx.beginPath();        ctx.moveTo(prevX, prevY);        ctx.lineTo(currX, currY);        ctx.strokeStyle = x;        ctx.lineWidth = y;        ctx.stroke();        ctx.closePath();    }        function erase() {        var m = confirm("Want to clear");        if (m) {            ctx.clearRect(0, 0, w, h);            document.getElementById("canvasimg").style.display = "none";        }    }        function save() {        document.getElementById("canvasimg").style.border = "2px solid";        var dataURL = canvas.toDataURL();        document.getElementById("canvasimg").src = dataURL;        document.getElementById("canvasimg").style.display = "inline";    }        function findxy(res, e) {        if (res == 'down') {            prevX = currX;            prevY = currY;            currX = e.clientX - canvas.offsetLeft;            currY = e.clientY - canvas.offsetTop;                flag = true;            dot_flag = true;            if (dot_flag) {                ctx.beginPath();                ctx.fillStyle = x;                ctx.fillRect(currX, currY, 2, 2);                ctx.closePath();                dot_flag = false;            }        }        if (res == 'up' || res == "out") {            flag = false;        }        if (res == 'move') {            if (flag) {                prevX = currX;                prevY = currY;                currX = e.clientX - canvas.offsetLeft;                currY = e.clientY - canvas.offsetTop;                draw();            }        }    }    </script>    <body onload="init()">        <canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>        <div style="position:absolute;top:12%;left:43%;">Choose Color</div>        <div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div>        <div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div>        <div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div>        <div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div>        <div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div>        <div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div>        <div style="position:absolute;top:20%;left:43%;">Eraser</div>        <div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div>        <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">        <input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;">        <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;">    </body>    </html>

Drawing on a HTML5 Canvas: how to draw at tip of mouse cursor

this.offsetLeft is equal to 0. That's why subtracting from it does nothing, because in the scope of the function, "this" is the canvas itself. Instead of clientX\Y, you want to use the mouse event offsetX\Y, so simply, this:

var coord = { 'x': e.offsetX, 'y': e.offsetY };

working example

HTML5 Canvas How To Fill A Mouse Drawn Triangle

    function drawTriangle(e) {
        e.preventDefault();
        e.stopPropagation();

        if (!isDrawing) return;
        
        // clear the canvas
        context.clearRect(0, 0, canvas.width, canvas.height);

        // draw a new rect from the start position
        // to the current mouse position
        context.strokeStyle = 'red';
        context.fillStyle = 'rgba(25,50,75,0.5)';
        context.lineWidth = 3;
        context.lineJoin = context.lineCap = 'round';
        context.setLineDash([0, 0]);
        context.globalAlpha = 1.0;
        context.beginPath();


        context.moveTo(startPoint.x, startPoint.y);
        context.lineTo(e.offsetX, e.offsetY);
        context.lineTo(startPoint.x * 2 - e.offsetX, e.offsetY);
        context.closePath();
        context.stroke();
        context.fill();

    }

Let users draw rectangles with mouse in canvas with Javascript

Edit: Sorry for my mistake. I missed the position:relative property for the container. Now it should work.

The code in your jsfiddle redraw repeatedly to give indications of the rectangle. I think it would be better to separate this indication canvas to a new layer, and use an overlapped layer to show the drawn rectangles.
JS:

// get references to the canvas and context
var canvas = document.getElementById("canvas");
var overlay = document.getElementById("overlay");
var ctx = canvas.getContext("2d");
var ctxo = overlay.getContext("2d");

// style the context
ctx.strokeStyle = "blue";
ctx.lineWidth = 3;
ctxo.strokeStyle = "blue";
ctxo.lineWidth = 3;

// calculate where the canvas is on the window
// (used to help calculate mouseX/mouseY)
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();

// this flage is true when the user is dragging the mouse
var isDown = false;

// these vars will hold the starting mouse position
var startX;
var startY;

var prevStartX = 0;
var prevStartY = 0;

var prevWidth  = 0;
var prevHeight = 0;

function handleMouseDown(e) {
    e.preventDefault();
    e.stopPropagation();

    // save the starting x/y of the rectangle
    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);

    // set a flag indicating the drag has begun
    isDown = true;
}

function handleMouseUp(e) {
    e.preventDefault();
    e.stopPropagation();

    // the drag is over, clear the dragging flag
    isDown = false;
    ctxo.strokeRect(prevStartX, prevStartY, prevWidth, prevHeight);
}

function handleMouseOut(e) {
    e.preventDefault();
    e.stopPropagation();

    // the drag is over, clear the dragging flag
    isDown = false;
}

function handleMouseMove(e) {
    e.preventDefault();
    e.stopPropagation();

    // if we're not dragging, just return
    if (!isDown) {
        return;
    }

    // get the current mouse position
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    // Put your mousemove stuff here

    

    // calculate the rectangle width/height based
    // on starting vs current mouse position
    var width = mouseX - startX;
    var height = mouseY - startY;

        // clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // draw a new rect from the start position 
    // to the current mouse position
    ctx.strokeRect(startX, startY, width, height);
    
        prevStartX = startX;
        prevStartY = startY;

        prevWidth  = width;
        prevHeight = height;
}

// listen for mouse events
$("#canvas").mousedown(function (e) {
    handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
    handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
    handleMouseUp(e);
});

$("#canvas").mouseout(function (e) {
    handleMouseOut(e);
});

HTML:

<h4>Drag the mouse to create a rectangle</h4>
<div id = "canvasWrapper">
 <canvas id="overlay" width=300 height=300></canvas>
 <canvas id="canvas" width=300 height=300></canvas>
</div>

CSS:

body{ background-color: ivory; }
canvas{
  border: 1px solid red;
  position: absolute;
}
#canvasWrapper{
  position:relative;
}

http://jsfiddle.net/xkmqz9ho/

While drawing on a HTML5 canvas using mouse, mouse position is not correctly positioned

Element.getBoundingClientRect is an absolute coordinate relative to the viewport. You don not need to use the coordinates of the container eg ancestor.getBoundingClientRect(); is not required.

Example converting mouse event client coords to canvas pixel coords. (assuming Window.devicePixelRatio === 1)

const ctx = canvas.getContext("2d");
ctx.lineWidth = 10;
var x, y;
addEventListener("mousemove", mouseMove);
function mouseMove(e) {
    const canRect = canvas.getBoundingClientRect(); 
    const scaleX = canvas.width / canRect.width;  
    const scaleY = canvas.height / canRect.height; 
    const xx = (e.clientX - canRect.left) * scaleX;
    const yy = (e.clientY - canRect.top) * scaleY;
    
    if (x !== undefined) {
        ctx.beginPath();
        ctx.lineTo(x, y);
        ctx.lineTo(xx, yy);
        ctx.stroke();
    }
    x = xx;
    y = yy;
}

canvas {
    height: 150px; 
    width: 300px;
    border: 1px solid black;
}
#viewer {
   position: absolute;
   top: 40px;
   left: 100px;
}

Move mouse over canvas.
<div id="viewer">
  <canvas id="canvas" width="1190" height="1683" style=""></canvas>
</div>

Draw on Html5 Canvas Using a Mouse