Menu
I have a web page which is displaying a number of images on the HTML5 canvas. It is possible to drag and drop most of these images around the canvas- a feature I added using the KineticJS library. I am however, using a copy of the KineticJS library that I’ve downloaded and saved locally, as I wanted to make one or two changes to it- the main one being that when a ‘mousedown’ was detected on an image, originally, anything that hadn’t been drawn to the canvas using the library was cleared from it, and I had a few things on the canvas, that weren’t drawn by the library that I didn’t want to lose.
I now want to add a feature, so that whenever a ‘mousedown’ is detected on one of the images displayed on the canvas, a textual description of that image will be displayed on the page, outside the canvas area, in some <p></p> tags.
I have two arrays- one which contains all of the images that are being drawn to the canvas, and another, each element of which contains the text corresponding to a single image from the first array.
I have the following JS function:
[CODE] function isClickOnImage(event){
var clickX = event.clientX;
var clickY = event.clientY;
var imageCheckIteration = 0;
while(imageCheckIteration < sources.length){
if((clickX > sources[imageCheckIteration].x && clickX < sources[imageCheckIteration].x + imageWidth) &&
(clickY > sources[imageCheckIteration].y && clickY < sources[imageCheckIteration].y + imageHeight)){
/*This is where I need to print the variable that holds the text I want to display, but I need to display its contents
outside the canvas, in the <p></p> tags below. */
document.getElementById(“tipsParagraph”).innerHTML = tips[imageCheckIteration];
}
}
}
which I intended would update the contents of the “tipsParagraph” (which is the ID I’ve given to the <p> tag whose contents I want to update) to whatever text from the ‘tips’ array corresponded to the image that the click had been detected on.
But, for some reason, this function doesn’t seem to work- when I click on an image on the canvas, although I am still able to drag and drop it around the canvas, the text in the paragraph below the canvas never changes. Can anyone point me in the right direction here?