1

Here is my fiddle

HTML for Canvas:

<div id="canvasDiv"><canvas id="myNewCanvasColumn" width="490" height="220"></canvas></div>

I am working on a canvas drawing tool. Problem is that, i am unable to select the appropriate sizes for drawing. I have defined sizes like "small, normal, large and huge". Default selection is normal. I have wrote some function to determine the radius, but it is not working. Can some one help me?

Thanks a ton..!

1 Answer 1

0

You can set different context.lineWidth to set the cursor size. I've updated the code with that.

function redraw() {
    clickSize.length = 0;
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    //context.strokeStyle = "#df4b26";
    context.lineJoin = "round";
    //context.lineWidth = 5;                        
    for (var i = 0; i < clickX.length; i++) {
        context.beginPath();
        if (clickDrag[i] && i) {
            context.moveTo(clickX[i - 1], clickY[i - 1]);
        } else {
            context.moveTo(clickX[i] - 1, clickY[i]);
        }
        context.lineTo(clickX[i], clickY[i]);
        context.closePath();
        context.strokeStyle = clickColor[i];
        context.lineWidth = cursorSize;
        //alert('radius is'+context.lineWidth)
        context.stroke();
    }
}
$('#choosesmall').click(function () {
    curSize = "small";
    cursorSize = 1;
});
$('#choosenormal').click(function () {
    curSize = "normal";
    cursorSize = 3;
});
$('#chooselarge').click(function () {
    curSize = "large";
    cursorSize = 5;
});
$('#choosehuge').click(function () {
    curSize = "huge";
    cursorSize = 7;
});

See the Fiddle

Edit

$(document).ready(function () {

    /* Declaration global Variables */
    var clickX = new Array();
    var clickY = new Array();
    var clickDrag = new Array();
    var paint;
    var context;
    var canvas;
    var colorPurple = "#cb3594";
    var colorGreen = "#659b41";
    var colorYellow = "#ffcf33";
    var colorBrown = "#986928";
    var colorRed = "#ff0000";
    var curColor = colorPurple;
    var clickColor = new Array();
    var clickSize = new Array();
    var curSize = 1;
    /* End of Declaring Global Variables */

    context = document.getElementById('myNewCanvasColumn').getContext("2d");
    var canvasDiv = document.getElementById('canvasDiv');
    canvas = document.createElement('canvas');
    canvas.setAttribute('width', 700);
    canvas.setAttribute('height', 300);
    canvas.setAttribute('id', 'canvas');
    canvasDiv.appendChild(canvas);
    if (typeof G_vmlCanvasManager != 'undefined') {
        canvas = G_vmlCanvasManager.initElement(canvas);
    }
    var radius;
    var i = 0;
    context = canvas.getContext("2d");

    /* Event Handlers for drawing */
    $('#canvas').mousedown(function (e) {
        var mouseX = e.pageX - this.offsetLeft;
        var mouseY = e.pageY - this.offsetTop;
        paint = true;
        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
        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;
    });
    $("#clear").click(function () {
        clearDrawing();
    });
    /* End of Event Handlers */


    /* Custom Color Pickers */
    $('#choosegreen').click(function () {
        curColor = "#659b41";
    });
    $('#choosepurple').click(function () {
        curColor = "#cb3594";
    });
    $('#chooseyellow').click(function () {
        curColor = "#ffcf33";
    });
    $('#choosebrown').click(function () {
        curColor = "#986928";
    });
    $('#choosered').click(function () {
        curColor = "#ff0000";
    });
    /* End of Custom Color Pickers */

    /* Custom Size Picker */
    $('#choosesmall').click(function () {
        curSize = 1;
    });
    $('#choosenormal').click(function () {
        curSize = 3;
    });
    $('#chooselarge').click(function () {
        curSize = 5;
    });
    $('#choosehuge').click(function () {
        curSize = 7;
    });
    /* End of Custom Size Picker */
    function addClick(x, y, dragging) {
        clickX.push(x);
        clickY.push(y);
        clickDrag.push(dragging);
        clickColor.push(curColor);
        clickSize.push(curSize);
        //        alert(clickSize);
    }

    function clearDrawing() {
        clickX.length = 0;
        clickY.length = 0;
        clickDrag.length = 0;
        context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    }

    function redraw() {
        context.clearRect(0, 0, context.canvas.width, context.canvas.height);
        //context.strokeStyle = "#df4b26";
        context.lineJoin = "round";
        //context.lineWidth = 5;                        
        for (var i = 0; i < clickX.length; i++) {

            context.beginPath();

            if (clickDrag[i] && i) {
                context.moveTo(clickX[i - 1], clickY[i - 1]);
            } else {
                context.moveTo(clickX[i] - 1, clickY[i]);
            }
            context.lineTo(clickX[i], clickY[i]);
            context.closePath();
            context.strokeStyle = clickColor[i];
            context.lineWidth = clickSize[i];
            // alert(clickColor[i]);
            //alert('radius is'+context.lineWidth)
            context.stroke();
        }
    }
});

Updated Fiddle

2
  • Thank you, checked ur code. But there is an issue. It is that, the radius size is changing simultaneously, when you prefer to go with other sizing tool, for an already drawn image...
    – steeve
    Jul 10, 2014 at 12:09
  • Works fine now... Accepted :)
    – steeve
    Jul 11, 2014 at 5:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.