0

I'm setting up an experimental html5 website using canvas. I am drawing 3 circles all next to each other and all I want to know is how to be able to select them.

I'd like them to become links, in a way. Not tags, since everything's gonna be created using javascript.

Something like kinetic JS : http://www.kineticjs.com/, but without the extra library.

I have found some scripts that are using ghost canvas and contexts, but the examples are for dragging and stuff. I only want to be able to select my shape and execute some code.

Thank you!

Elggetto
  • 227
  • 2
  • 7
  • 15
  • http://diveintohtml5.org/canvas.html#halma – Since you're talking about a concept without telling us what you've tried. Tear it apart – It'll show you how to calculate the 'legal' click and perform an action. – stslavik Sep 07 '11 at 16:36
  • http://www.html5canvastutorials.com/advanced/html5-canvas-path-mouseover/ - I'm trying to do this, but without the library. But if there is no other way (not too complicated) i'll use this. – Elggetto Sep 07 '11 at 16:41
  • 1
    Yup, and everything done in that can be done without the library by tearing apart that halma game. The library just makes it less effort to code. Dragging, clicking, dropping, mouseovering – these are just events. You don't need a library to do it. – stslavik Sep 07 '11 at 17:44

2 Answers2

0

if you are talented in xml i suggest you to use canvas + SVG (http://www.w3schools.com/svg/)

And follow this simple example. http://jsvectoreditor.googlecode.com/svn/trunk/index.html

regarding to SVG and Canvas , the differences are obvious, as you can load bitmaps in SVG, and you can draw lines using the canvas API. However, creating the image may be easier using one technology over the other, depending on whether your graphic is mainly line-based or more image-like.

Imasha
  • 41
  • 3
0

I am thinking you might want to look into the IsPointInPath() method. It will help you figure out whether or not the mouse clicked on your canvas object.

See Detect mouseover of certain points within an HTML canvas?

Community
  • 1
  • 1
jamauss
  • 1,001
  • 1
  • 15
  • 35