Channel 9 Forums - Coffeehouse - Getting images created in a Canvas context to respond to an event http://mschnlnine.vo.llnwd.net/d1/Dev/App_Themes/C9/images/feedimage.png Channel 9 Forums - Coffeehouse - Getting images created in a Canvas context to respond to an event http://channel9.msdn.com/Forums Channel 9 keeps you up to date with the latest news and behind the scenes info from Microsoft that developers love to keep up with. From LINQ to SilverLight – Watch videos and hear about all the cool technologies coming and the people behind them. http://channel9.msdn.com/Forums en Sun, 19 May 2013 23:27:16 GMT Sun, 19 May 2013 23:27:16 GMT Rev9 6 -6 -1 Coffeehouse - Getting images created in a Canvas context to respond to an event Hello, I am creating a rudimentary game for educational purposes.  I simply want to show at random intervals of time (up to 3 seconds) 1 to all images in a 5 image array.  The images will display at random locations within the canvas.  The images will disappear in random intervals of time (up to 3 seconds).  If the user clicks on an image before it disappears a running score is displayed and the image lights up with a yellow border.  I am using CSS for class types to light up if the image is clicked.  I can addEventListeners to the various images created and I set the className as appropriate.  I use ctx = canvas.getContext("2d") and ctx.drawImage to show the image.  The image is never getting the event.  Any code snippet to help me out?  Maybe I am barking up the wrong tree using Canvas?  I am hoping the experts in the coffee house can show me the code snip for this very simple example.  codeShow samples do not quite have the pieces for this.  Thanks

]]> http://channel9.msdn.com/Forums/Coffeehouse/Getting-images-created-in-a-Canvas-context-to-respond-to-an-event/f48d89d71b50476a9c09a14601374238#f48d89d71b50476a9c09a14601374238 Mon, 14 Jan 2013 18:53:15 GMT http://channel9.msdn.com/Forums/Coffeehouse/Getting-images-created-in-a-Canvas-context-to-respond-to-an-event/f48d89d71b50476a9c09a14601374238#f48d89d71b50476a9c09a14601374238 123logd 6 http://channel9.msdn.com/Niners/123logd/Discussions/RSS Coffeehouse - Getting images created in a Canvas context to respond to an event Did you try to do a detailed post with code on StackOverflow? There's probably devs there that watch posts with tags with HTML5 and Canvas. Then you're reaching a thousand devs instead of two here that might know Smiley

]]> http://channel9.msdn.com/Forums/Coffeehouse/Getting-images-created-in-a-Canvas-context-to-respond-to-an-event/a0e33e8d9ea84428a42aa146014d1edd#a0e33e8d9ea84428a42aa146014d1edd Mon, 14 Jan 2013 20:12:51 GMT http://channel9.msdn.com/Forums/Coffeehouse/Getting-images-created-in-a-Canvas-context-to-respond-to-an-event/a0e33e8d9ea84428a42aa146014d1edd#a0e33e8d9ea84428a42aa146014d1edd Harlequin 6 http://channel9.msdn.com/Niners/Harlequin/Discussions/RSS Coffeehouse - Getting images created in a Canvas context to respond to an event Why use a canvas? Why not use an img element and move it around with JavaScript? If these are images that you need to draw dynamically, you need to add the event handler to the canvas element, and then figure if the click coordinates are within the bounds of any of the images you drew.

]]> http://channel9.msdn.com/Forums/Coffeehouse/Getting-images-created-in-a-Canvas-context-to-respond-to-an-event/2aaf146beae04a2c83f6a146014da7ac#2aaf146beae04a2c83f6a146014da7ac Mon, 14 Jan 2013 20:14:48 GMT http://channel9.msdn.com/Forums/Coffeehouse/Getting-images-created-in-a-Canvas-context-to-respond-to-an-event/2aaf146beae04a2c83f6a146014da7ac#2aaf146beae04a2c83f6a146014da7ac cbae 6 http://channel9.msdn.com/Niners/cbae/Discussions/RSS Coffeehouse - Getting images created in a Canvas context to respond to an event

, cbae wrote

Why use a canvas? Why not use an img element and move it around with JavaScript?

Indeed, when you put something on a canvas it becomes part of the canvas. No more css or onclick events. Just use a div as container with "position: relative;" and put img element in there with "position: absolute;"

]]> http://channel9.msdn.com/Forums/Coffeehouse/Getting-images-created-in-a-Canvas-context-to-respond-to-an-event/70b9fd607eb54f43b99aa1460150db2d#70b9fd607eb54f43b99aa1460150db2d Mon, 14 Jan 2013 20:26:27 GMT http://channel9.msdn.com/Forums/Coffeehouse/Getting-images-created-in-a-Canvas-context-to-respond-to-an-event/70b9fd607eb54f43b99aa1460150db2d#70b9fd607eb54f43b99aa1460150db2d ZippyV 6 http://channel9.msdn.com/Niners/ZippyV/Discussions/RSS Coffeehouse - Getting images created in a Canvas context to respond to an event Thank you.  I will proceed without Canvas.  So, what applications are ideal for Canvas?

]]> http://channel9.msdn.com/Forums/Coffeehouse/Getting-images-created-in-a-Canvas-context-to-respond-to-an-event/baeff0f615a648a88d0da146016c21fd#baeff0f615a648a88d0da146016c21fd Mon, 14 Jan 2013 22:05:46 GMT http://channel9.msdn.com/Forums/Coffeehouse/Getting-images-created-in-a-Canvas-context-to-respond-to-an-event/baeff0f615a648a88d0da146016c21fd#baeff0f615a648a88d0da146016c21fd 123logd 6 http://channel9.msdn.com/Niners/123logd/Discussions/RSS Coffeehouse - Getting images created in a Canvas context to respond to an event If you create a game that uses a game loop, then you're not going to responding to events on individual elements on the screen. You would simply calculate movements of the player/enemies, determine collisions, and then refresh the screen by redrawing everything. That's when you would use a canvas.

]]> http://channel9.msdn.com/Forums/Coffeehouse/Getting-images-created-in-a-Canvas-context-to-respond-to-an-event/248364e1762f43ea9a02a146017ca6fd#248364e1762f43ea9a02a146017ca6fd Mon, 14 Jan 2013 23:05:54 GMT http://channel9.msdn.com/Forums/Coffeehouse/Getting-images-created-in-a-Canvas-context-to-respond-to-an-event/248364e1762f43ea9a02a146017ca6fd#248364e1762f43ea9a02a146017ca6fd cbae 6 http://channel9.msdn.com/Niners/cbae/Discussions/RSS