JavaScript stroke fill on click

Question

I'm trying to to make it possible for an image on a canvas to have a box over it with low opacity, to make it be shown that it has been selected. So I need an onclick function, but i'm stuck on what to do. Any advice? I would aslo appreciate if someone could point me in the right direction on how to make the box also pulsate.

                var image1 = new Kinetic.Image({
                    image: imageObj,
                    x: xposition,
                    y: yposition,
                    width: width,
                    height: height,
                    stroke: 'blue',
                    srokeFill: 'red',
                    strokeWidth: 5,
                    draggable: true,
                    dragBoundFunc: function (pos) {
                       if (pos.x < this.minX)
                            this.minX = pos.x;
                        return {
                            x: pos.x,
                            y: this.getAbsolutePosition().y                                 
                        }
                    }


                });

                layer.on('mouseover', function (evt) {
                    var shape = evt.target;
                    document.body.style.cursor = 'pointer';
                    shape.strokeEnabled(true);
                    layer.draw();
                });

                layer.on('mouseout', function (evt) {
                    var shape = evt.target;
                    document.body.style.cursor = 'default';
                    shape.strokeEnabled(false);
                    layer.draw();

                });

Answer 1

When making a clickable region on a canvas you need to.

- Create a redraw function.
- Find the mouse point inside of canvas.
- Do collision detection on the mouse point and region.

update: added multiple clickable regions.

 // x1, y1, x2, y2, clicked var boxes = [{ x1: 10, y1: 10, x2: 110, y2: 110, clicked: false }, { x1: 120, y1: 10, x2: 220, y2: 110, clicked: false }]; function go() { var can = document.getElementById('can'); var ctx = can.getContext('2d'); var w = can.width; var h = can.height; makeNoise(ctx); var imageData = ctx.getImageData(0, 0, w, h); var mx = 0; var my = 0; $('#can').mousemove(function(event) { var offset = $(this).offset(); mx = event.pageX - offset.left; my = event.pageY - offset.top; redraw(); }); $('#can').click(function(event) { var offset = $(this).offset(); mx = event.pageX - offset.left; my = event.pageY - offset.top; for (var i = 0, len = boxes.length; i < len; i++) { var b = boxes[i]; if (hit(b.x1, b.y1, b.x2, b.y2)) { b.clicked = !b.clicked; } } redraw(); }); function redraw() { // Draw the original image ctx.putImageData(imageData, 0, 0); // Draw the clickable region for (var i = 0, len = boxes.length; i < len; i++) { drawBox(boxes[i]); } // Draw the mouse. Probably only needed when testing // mouse location. drawMouse(); } redraw(); // Collision dection of a square against mouse point. // square points x1,y1 must be less than x2,y2 function hit(x1, y1, x2, y2) { if (mx < x1 || my < y1 || mx > x2 || my > y2) return false; return true; } function drawMouse() { ctx.moveTo(mx, my); ctx.fillStyle = "yellow"; ctx.beginPath(); ctx.arc(mx, my, 5, 0, Math.PI * 360); ctx.fill(); } function drawBox(b) { if (b.clicked) { // Mouse clicked. ctx.fillStyle = "rgba(255,0,255,.5)" } else if (hit(b.x1, b.y1, b.x2, b.y2)) { // Mouse Over ctx.fillStyle = "rgba(255,255,255,.5)" } else { // Mouse Out ctx.fillStyle = "red"; } ctx.fillRect(b.x1, b.y1, b.x2 - b.x1, b.y2 - b.y1); } } // Fill a canvas context with noise. function makeNoise(ctx) { var can = ctx.canvas; var imageData = ctx.getImageData(0, 0, can.width, can.height); var d = imageData.data; for (var i = 0, len = d.length; i < len; i += 4) { d[i] = d[i + 1] = d[i + 2] = (Math.random() * 8) << 4; d[i + 3] = 255; } ctx.putImageData(imageData, 0, 0); } go();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="can" width="400" height="300"></canvas>