javascript - Tutorial on isPointinPath not copying to my computer -

I found this useful tutorial

I copied it in my text editor and when I opened it Nothing happens to this. I changed it by adding an announcement

  & lt ;! DOCTYPE html & gt; & Lt; Html lang = "en" & gt; & Lt; Top & gt; & Lt; Title & gt; ExampleMouseOver & lt; / Title & gt; & Lt; / Head & gt; & Lt; Script & gt; Window.onload = function (e) {var canvas = document.getElementById ('cvs'); Var reference = canvas.getContext ('2d'); // Rectangle referencing context.bigpath (); Context.rect (50,50,100,100); Context.fill (); Context.fillStyle = 'Red'; // Refer to the circle.Bigpath (); Context.arc (450,175, 50, 0,2 * Math. PI, False); Context.fill (); Context.fillStyle = 'green'; // Replace shape. Bbi (); Context.moveTo (250,100); Context.lineTo (350,175); Context.lineTo (325215); Context.lineTo (185,195); Context.fill (); Canvas.onmousemove = function (e) {var canvas = e.target; Var reference = canvas.getContext ('2d'); // This mouse coordinates (relative to the canvas) is var xx = RGraph.getMouseXY (e); Var mousex = mouse xy [0]; Var mouseY = Mouse XY [1]; // Replay the rectangle again (no need to fill it out) and reference it to reference.beginPath (); Context.rect (50,50,100,100); If (context.isPointInPath (mouseX, mouseY)) {canvas.style.cursor = 'Indicator'; Return; } ///////////////////////////////////////////////// ////////////// Replay the circle path again (there is no need to fill it) and reference it to context.beginPath (); Context.arc (450,175, 50, 0,2 * Math. PI, False); If (context.isPointInPath (mouseX, mouseY)) {canvas.style.cursor = 'Indicator'; Return; } ///////////////////////////////////////////////// ////////////// // Run the irregular shape path again (there is no need to fill it) and reference it to reference.beginPath (); Context.moveTo (250,100); Context.lineTo (350,175); Context.lineTo (325215); Context.lineTo (185,195); If (context.isPointInPath (mouseX, mouseY)) {canvas.style.cursor = 'Indicator'; Return; } ///////////////////////////////////////////////// ////////////// Return the cursor to the default style canvas. Cacheor = 'default'; }} & Lt; / Script & gt; & Lt; / Html & gt;  

You will need a body element and canvas element. Apart from this, your script element should be either inside your main element or element of your body.

What was the following sample, but was not included in their sample code:

  & lt; Body & gt; & Lt; Canvas id = "cvs" width = "600" height = "250" style = "border: 1 px solid gray; cursor: indicator;" & Gt; [No canvas support] & lt; / Canvas & gt; & Lt; / Body & gt;  

Edit : In addition to this, the code is calling "RGraph.getMouseXY (e)", which is in a library file that you are not referring to . You can either add references to that library or get the position of the mouse on your own.

If you want to use other parts of the RGB library to draw charts, then you should add the library. To add a library, you must follow the instructions given on the RGRF site related to downloading and launching from RGRF ().

If this was just a sample you wanted to do, then you yourself can do this by changing the mouse position you have:

  var mouseXY = RGraph .getMouseXY (e); Var mousex = mouse xy [0]; Var mouseY = Mouse XY [1];  

Here:

  var mouseX = e.clientX - canvas.getBoundingClientRect (). left; Var mouseY = e.clientY - Canvas. Gate bounding clientwrite (). Top;  

This may not be the strongest solution, but it should be sufficient for your purposes. Basically you are getting the position of the mouse in the window, then by lowering the top-left of the canvas in the window, so that you avoid the position of the mouse in the canvas.