ansaurus

Question

Drawing a circle on the canvas using mouse events

Answer 1

+2 A:

Well, this code snippet doesn't tell us much, but there are a couple of obvious errors in your code. First, DOM Event object doesn't have _x and _y properties. but rather clientX and clientY or pageX and pageY. To get relative mouse coordinates from the current event object, you would do something like:

element.onclick = function(e) {
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
}

Next, canvas' 2d context doesn't have a method called circle, but you could write your own, maybe something like:

var ctx = canvas.context;
ctx.fillCircle = function(x, y, radius, fillColor) {
    this.fillStyle = fillColor;
    this.beginPath();
    this.moveTo(x, y);
    this.arc(x, y, radius, 0, Math.PI*2, false);
    this.fill();
}

Anyhow, here's a test html page to test this out:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html lang="en">
<head>
    <title>Canvas - Draw Circle Test</title>
</head>
<body>
    <div id="canvas"></div>
    <script type='text/javascript'>//<![CDATA[
        (function () {
            // Creates a new canvas element and appends it as a child
            // to the parent element, and returns the reference to
            // the newly created canvas element
            function createCanvas(parent, width, height) {
                var canvas = {};
                canvas.node = document.createElement('canvas');
                canvas.context = canvas.node.getContext('2d');
                canvas.node.width  = width || 100;
                canvas.node.height = height || 100;
                parent.appendChild(canvas.node);
                return canvas;
            }

            function init(container, width, height, fillColor) {
                var canvas = createCanvas(container, width, height);
                var ctx = canvas.context;
                    // define a custom fillCircle method
                    ctx.fillCircle = function(x, y, radius, fillColor) {
                        this.fillStyle = fillColor;
                        this.beginPath();
                        this.moveTo(x, y);
                        this.arc(x, y, radius, 0, Math.PI*2, false);
                        this.fill();
                    }
                    ctx.clearTo = function(fillColor) {
                        ctx.fillStyle = fillColor;
                        ctx.fillRect(0, 0, width, height);
                    }
                    ctx.clearTo('#ddd');
                    // bind mouse events
                    canvas.node.onmousemove = function(e) {
                        // uncomment this if you want click'n'drag drawing
                        // if (!canvas.isDrawing) return;
                        var x = e.pageX - this.offsetLeft;
                        var y = e.pageY - this.offsetTop;
                        var radius = 10; // or whatever
                        var fillColor = '#ff0000';
                        ctx.fillCircle(x, y, radius, fillColor);
                    }
                    /*
                    // uncomment this if you want click'n'drag drawing
                    canvas.node.onmousedown = function(e) {
                        canvas.isDrawing = true;
                    }
                    canvas.node.onmouseup = function(e) {
                        canvas.isDrawing = false;
                    }
                    */
            }
            var container = document.getElementById('canvas');
            init(container, 200, 200, '#ff0000');

        })();

    //]]></script>

</body>
</html>

I hope this helps. Cheers

ArtBIT 2010-10-04 23:00:26

not exactly as i wanted but did helped me to understand how to implement exactly what i wanted to do using mouse events for circle

Nitesh 2010-10-05 19:49:26

ansaurus

tags:

views:

answers:

Drawing a circle on the canvas using mouse events

related questions