Develop Reference

keeping a drawing canvas visible behind an image

I wonder if anyone could assist me with this?
I am writing a webpage with a drawing area ("GraphicsArea", below) that loads a map as a SVG image into the innerHTML of the "DiagramArea" div contained in it. The SVG has defined areas which have events attached to them and css styling that allows me to highlight areas as I mouseover them, and fill them with a highlight colour when I click on them. This all works fine.
I have, superimposed over the "DiagramArea", a HTML5 canvas element ("CanvasArea"). I have some javascript that allows me to draw inside this freehand with the mouse. The canvas is transparent, and I can see the map underneath it when I draw.
I can toggle between the drawing canvas layer and the "DiagramArea" with the SVG which I am using as an imagemap, by setting zIndex. I have a button that does this, allowing me to swap between functionality to highlight areas of the map, and the freehand drawing functionality.
My problem is that if I toggle away from the canvas, its drawing is hidden while I use the image map functionality. I can toggle it back again to display the drawing overlay after I have highlighted the areas I want to highlight, but it's a bit clumsy
Is there a way to keep the canvas contents visible while I'm using the rollover and click events attached to the SVG? I'm not particularly fussy as to whether it's a style or code solution. I'd prefer to avoid having to use an external library, if possible.
<div id="GraphicsArea">
<canvas id='CanvasArea'></canvas>
<div id="DiagramArea"></div>
</div>
Many thanks.

highlight an image except for a radius around mouse on hover

The effect I want to achieve is an image in a div that has a coloured highlight on top (with some opacity to see through it) and when you hover over that image a certain radius around the mouse will have the highlight removed (think of shining a torch over a greyed out image to reveal a brighter around around the torchlight)
I don't know where to start with this because I wasn't sure about dynamically styling a portion of a div without setting proportional properties in css. I know i can achieve a 'blocky' version of this with on hover and styling sections of a div on hover but that means i would have to constrain the styling to seperate div elements and it would not be 'fluid' so I'm looking for some pointers to a js solution I can write (possibly on mouseover call a function that gets mouse position and gets radius around it but then I wasn't sure how to dynamically style that radial area?)
Are there any functions that allow this type of styling within a dynamic area?

The solution you're looking for might be achieved through CSS but using JavaScript mouse events can also help.
Like discussed in the comments section, you can use help of the mousemove event to somehow achieve what you desire.
For other users reference, here is the link to the codepen https://codepen.io/edupoch/pen/GIhJq
In the codepen above, instead of the zoomin cursor image, you can use some gif image with the effect you want and apply it using the above code.

Javascript mouse over

I am trying to get the mouse over function working in my pure Javascript (no jQuery, HTML or CSS). At the moment I have created just a small circle and when I mouse over it I want it to change colors.
instance.threadContext is just the part of the canvas where the circle is being drawn.
Any help would be much appreciated.

What you need to understand is that when you draw something onto a canvas, it does not become a ui element, but is actually a part of the overall image of the canvas. The reason you can't invoke a mouse-over event on the circle is because the circle isn't a thing that can receive events, it's just a drawing of a circle on an element which itself can receive events.
One way that you can get around this is to measure the mouse position on move and redraw the circle in an over state when the position is within the area for which you want the event to be triggered.

Can I use something like Raphael.js to draw vectors above the HTML window?

There are a lot of questions regarding drawing on the canvas element and using things like Raphael.js (which is pretty awesome), but I'd like to know if there is a way I can draw some vectors (mostly diagonal lines) above the DOM document rendered in a html doctype webpage.
I haven't done much with the canvas element but I think it might be possible to do something like this with perhaps:
getting / monitoring the window size with javascript
creating / resizing a canvas element that takes up the whole page
somehow setting transparency on the canvas element
drawing the vectors that I want
When you use a clear .gif you can't click on or interact with the things underneath it - I would like to still be able to interact with the webpage normally. I would also like scrolling to move up and down the page normally so the vectors would scroll with the DOM elements.
Am I heading in the right direction with this?
How can I draw vectors above the HTML / DOM in a standard webpage?

Here's an example of Raphael.js drawing on top of text in a div http://raphaeljs.com/spin-spin-spin.html
Some more background on Raphael:
Raphael draws on an SVG canvas. If you give that a transparent
background and position it over the window (z-index), then you can get
the appearance you seek.
https://groups.google.com/forum/?fromgroups=#!topic/raphaeljs/SAPCl_UMNco

Add another image on top of a drawn image on canvas, then have it respond to onclick event, is it possible?

Here's a canvas app I come across : canvasphoto (uses YUI 2 I believe, which I haven't used before). It displays images on a canvas and it lets you resize/move the images across the canvas. What I want to do is to add a close button on the top right side of the images drawn on the canvas and have it trigger an onclick event when clicked (I'd display a confirm button asking the user if he/she wants to remove the image).
Is this possible? If so, can you help me get started on this (resource/link for drawing an image on top of another image drawn on a canvas, basic canvas manipulation, etc.) Thanks!
Edit: solved the part where the image rendered will respond to click (on top right corner only). So, the only problem left is drawing the close button on the top right corner of the image.

There is no way for something drawn into a canvas to respond to events without additional work. Either you can store the position of the close box and have an onclick event on the canvas check if the click occurs within the rectangle, or you could place an element over the canvas where the rectangle has been drawn and use that to handle the click. A relatively positioned div with no contents would work.

Instead of drawing on the corkboard, a div with an image is rendered on the page above the top right corner of the image by setting a higher z-index than the canvas and and absolute position (with the coordinates of the top right corner, of course).