We Keep Coding

How to detect if a shape was clicked (HTML5 canvas)?

I am drawing different shapes like rectangle, triangle, hexagon etc. using the canvas and lineTo method like in this blog. I just want a simple way to find if I clicked inside a shape. I can do it by filling the shape with some color and the checking if the point I clicked has this color but I don't want to use fill color method. Is there any other way to do it?
Also found isPointInPath but it did not work.

Check in here:
Javascript check Mouse clicked inside the Circle or Polygon
meouw answer works for sure I've test it and guarantee it works.
It seems that there are some other solutions, too that have been upvoted,
maybe you can try them, either

You could either try some canvas frameworks like http://kineticjs.com/ (check events section) which support already clickable elements out of the box or you'll need to write two functions, one which gives you your relative mouse click coordinates inside the canvas element (I used the one described here: https://stackoverflow.com/a/5932203/532102) and after write another function which checks if the returned mouse coordinates intersect with your shape on the canvas.

Blur border of a canvas shape

How would I make a canvas shape go out of focus?
I've seen it done with webGl and I was hoping there was a way to do it with canvas and JS?
I want to be able to animate the amount of blur so I can't use an image.

You're going to want a Javascript library. Here's a good one for that purpose that allows you to pick an X,Y and width/height on the canvas to blur:
http://www.quasimondo.com/BoxBlurForCanvas/FastBlur.js
And here's the demo:
http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

HTML/JS detecting areas on an image

On web (actually webview in mobile development), I have an image of a basketball court. I need to detect the click(touch) of the area on the court image, whether it is within the 3 point line or outside of it. What is the simplest way of achieving this? Old school image map? SVG? Canvas tag?

This is easiest done on a <canvas> element using well known frameworks like Kinetic and Fabric.
You would load the image in the bottom layer, then apply a 3pt layer over the whole image. On top of the 3pt layer is a 2pt layer in the form of an arc. The layering would look like this, from top to bottom:
- 2pt "arc" layer on either side |
- 3pt "full court" layer | Click propagation
- court image V
So when the player touches inside the 2pt arc layer, you know it's 2pt. When the player touches outside the arc, it's the 3pt layer that catches the touch. Additionally, frameworks might allow a propagation to underlying layers. You must prevent that one.

An image map would likely be the least complex implementation. Otherwise, you'll want to subscribe to a click anywhere on the court and then examine the mouse coordinates relative to the image.
If I were you, I'd save yourself the pain of writing client-side code for it and just use an image map. They work well for things like this.
http://www.w3schools.com/tags/tag_map.asp

You can use maybe this solution when you don´t use canvas: Click image and get coordinates with Javascript (2006)
For canvas there is a solution, too:
How do I get the coordinates of a mouse click on a canvas
element?
Getting mouse location in canvas
The simplest solution is getting an library and use it´s function...

using Raphael JS to scale a group of elements at once

I have a simple scene in Raphael JS which contains mainly basic elements, circles, rect, images, etc.
I want to scale up a circle on the mouseover event, which I can do, but I want to add an image over the top of the circle and have that scale as well when the mouse is over the circle OR the image.
Is there a way that I can scale two (or X) items instead of one at a time? Is there some kind of "container" element that I cant find?
Also, when then mouse is over the circle, the event fires, but then when the mouse goes over the image, the mouseout event of the circle fires, how can I stop this so that it looks like the circle and image are one element?

I think what you have to do here is create a transparent circle over the circle/image combination you already have. So, circle,image,circle. The second circle is where you put your event handling. By doing it this way, the top transparent circle will get focus even when it looks like you're hovering over the image.
Stick the lot of them in a set and scale the set in the mouseover. I'd do an example for you, but I'm inherently lazy. If you're really stuck, I'll give it a go.
Hope that makes sense.

HTML5 - canvas and dragging/dropping or placing an image where user clicks

Okay, my first question is this:
Is it possible to drag and drop an image on the canvas to a different place on the canvas?
I have the image on the canvas already, I would just like the user to be able to move it by clicking and dragging. I know this is possible with Kinetic JS, but is it possible just using the regular HTML5 canvas?
Second, if the first question isn't possible:
Is it possible for an image to be placed on a canvas at the point where a user clicks?
Can someone help me out here, or point me in the direction of a tutorial?
Thanks!

Is it possible to drag and drop an image on the canvas to a different place on the canvas?
Yes. You can read more about it here - http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-an-image-tutorial/
Is it possible for an image to be placed on a canvas at the point where a user clicks?
Yes. You'll need to find out the co-ordinates of the canvas element that were clicked and place the image accordingly.
You can read more and view demos of the canvas element here - http://www.html5canvastutorials.com/

Is it possible to drag and drop an image on the canvas to a different place on the canvas?. Yes. However, if you want this, you have to implement it yourself.
Is it possible for an image to be placed on a canvas at the point where a user clicks? Yes. However, if you want this, you first have to implement 1), then implement dragging images.