I'm working with the Canvas Tag to draw stuff to the screen, I have like 3 different shapes on the screen, and I want to make them linkable, they could be at different coordinates depending on the users interaction, is this possible with this?
Thanks!
You could attach an onmousemove handler to the element, and track the offset, if you need the mouse coordinates. Then you can just draw onto the canvas with those coords.
Related
can I make objects drawn in canvas response to mouse events? for example, to change colors or to display toolips on mouseover? I can adjust some values by using other types of inputs (range, radio...), but cannot make direct mouse manipulation on objects drawn in canvas.
No.
Anything drawn on html canvas becomes unremembered pixels.
What you will need to do is "remember" everything about all the things you've drawn: shape, position, color.
Then you can respond to mouse events and compare the mouse position with the bounding boxes of your remembered drawings.
If you want to change any drawing (recolor, reposition, etc), you must redraw that drawing.
Most often when you redraw any one thing, you will erase the entire canvas and redraw all items that were on the canvas.
You can listen for mouse events on the canvas. The rest is up to you. If you keep a list of objects drawn on the canvas, you can scan through the list looking for one that is under the mouse.
Is it possible to create some stack of transparent HTML5 canvases with event propagation?
For instance, I have a background canvas with drawn image on it with some attached click handler. After, I want to add another one canvas over the background canvas with exactly same size, also it has transparent zones. The question is, will the click handler of background canvas be fired if I click on it over the top layer?
will the click handler of background canvas be fired if I click on it over the top layer?
No it will not. The canvas blocks events from things behind it.
Generally you have two options: Put events on each canvas and make a system of letting them "fall through" if nothing happens on the first canvas, or putting events only on the topmost canvas and using those one events to do operations concerning all canvases.
I suggest the second approach. Keep all the events on only the topmost canvas.
I am playing around with HTML5 Canvas to develop an interactive personal website.
I created a canvas 400x200 and then put a background image on it. Now on top of the BG Image, I have placed 5 more images. Now, my requirement is, depending on the image clicked I want to 1, display a text outside of the canvas, and 2, grey out the other 4 images (more in an animated form).
I am able to accomplish till displaying the images, I am unable to create a click event action. Is it because the whole canvas is treated as one single image? if so would using #usemap work? I tried adding a addEventListener event but nothing is happening.
is there a easier way in SVG to accomplish the same?
Thanks for any pointers.
You can add click handler on the canvas using jquery like this
$("#canvasId").click(function(e){
alert("canvas clicked";
}
Now you will have to determine the image at which the click event was occurred. If you know the top-left and bottomRight corner of the image you can determine the image on which you had clicked. To determine the mouse location you can use something like following
var x = Math.floor((e.pageX-$("#canvasId").offset().left) / 20);
var y = Math.floor((e.pageY-$("#canvasId").offset().top) / 20);
I'm trying to figure out how to drag and drop an image from one canvas to another canvas. Assuming the canvases are next to each other, would it be possible to seamlessly drag something across the border? If not, is it a better idea to drag a div over the canvas, get its ID, and place it by responding to the mouseup location on the canvas?
You don't drag items on a canvas. A canvas is a non-retained mode (or immediate mode) graphics API. You issue draw commands and you get pixels. Simulating dragging is comprised of tracking the user's mouse movements and choosing to repeatedly clear and re-draw the canvas with different parameters to make some subset of the pixels appear to move as a cohesive object.
Contrast this with HTML or SVG where you actually change position/transform properties of a real DOM object and the watch as the visual representation of your document updates automatically.
If you have two canvases and want to drag something from one to the other, what I would do is:
On mouse down on the 'menu' canvas, create a new canvas programmatically just as large as the object, and (using absolute CSS positioning) place it over top of the item the user clicked on.
Draw the item onto that canvas.
Track the mousemove event on the document, and update the position of the canvas relative to the mouse.
When the user releases the mouse over the destination canvas, throw away (or hide) your tiny 'dragging' canvas, and re-draw the main canvas with the item that was dragged in the appropriate location.
Though, what I'd probably really do here is use SVG. ;)
Check this answer.
It is for multiple select drag & drop, but maybe will be useful.
Why does this need to be 2 canvases? The canvas is your drawing area, you control it. Why do you need 2?
Hi to keep it short and simple let's say I have a stage with 400x400 size in pixels, but I've drawn a map of 1000x1000 size in pixels. I want my player to be able to "walk" about the stage, but it appears stage.x and stage.y are read-only? Is there any method or way to have the stage "scroll" about, without having to move each object on the map?
Don't move the stage, move the 1000x1000 object,then it'll look like the whole thing is moving.
You should see the stage like a window. You can see everything behind it depending on the size of the window. You cannot change the size of the stage, or move it.
Just like a window you can measure the size of the stage. You can use this to navigate for example movieclips across the stage with actionscript.
Why don't you put the map and the other objects in a seperate layer, and move the map around. Other objects (for example a big red dot to tell the user its' location on the map) are on a fixed position on the map. Just move the map following a sort of path according the red dot.
Not entirely sure what you want to do, but it isn't possible to move the stage.
You can put all the movieclips (the player and the map, if you want) in one movieclip, put only that movieclip on the stage and move that.
But if you only want the map to scroll, just move the map around.
The other answers are correct, but there's an alternative to moving the map:
ScrollRect
Attach a rectangle to a your map's scrollRect property. Moving that rectangle will have the same apparent effect as moving the stage around.
There are minor pros and cons to using scrollRect vs. moving the world, but try them both and see which works better for you.