0

I'm trying to implement some javascript code I found with coffeescript and angular for practice. Here is that code on stackoverflow: area-hovering

However, whenever I append the canvas to the the image, my ng-mouseover function does not get called. My only guess is that overlaying the canvas somehow blocks angular from seeing my mouse over over the area polygon.

Here is the code so far:

AngularJS Coffeescript Code

angular.module 'myApp'
.controller 'myCtrl', ($scope) ->
  context2d = {}


  $scope.onInit = ->
    img = document.getElementById 'img-map' 
    can = document.getElementById 'myCanvas' 

    x = img.offsetLeft
    y = img.offsetTop
    w = img.offsetWidth
    h = img.offsetHeight

    imgParent = img.parentNode
    #imgParent.appendChild can

    can.style.zIndex = 1
    can.style.left = x + 'px'
    can.style.top = y + 'px'
    can.setAttribute 'width', w + 'px'
    can.setAttribute 'height', h + 'px'

    context2d = can.getContext '2d'
    context2d.fillStyle = 'red'
    context2d.strokeStyle = 'red'
    context2d.lineWidth = 2

    console.log 'safe'

$scope.onEnter = ->
  console.log 'test1'

Regular HTML Snippet

<div class="img-map-container" ng-init="onInit()">
  <center canvas id="myCanvas"></canvas>
  <img src="assets/images/map.png" width="640" height="512" alt="da map" id="img-map" usemap="#mymap">
  <map name="mymap">
    <area shape="poly"
          ng-mouseover="onEnter()" 
          coords="385,140,410,245,425,255,510,255,510,140"
          href=""
          alt=""
          title=""
          class="img-map-area"
          id="img-map-area-1" />
  </map>
</div>

Any help is greatly appreciated. :)

Community
  • 1
  • 1
Haywire Spark
  • 113
  • 10
  • I created a [fiddler](http://jsfiddle.net/fracz/HB7LU/9370/) of your problem and the `onEnter()` method is being called correctly. – fracz Dec 19 '14 at 19:19
  • @WojciechFrącz Where is the `onInit()` function code and declaration? I added the code to your [fiddler](http://jsfiddle.net/HB7LU/9374/), and now it can't reach one of the alerts. Strange that it can still reach your alert in fiddler, but I chop that up to an environment difference. The important thing is something wrong happens in my `onInit()` func and I need to fix it to do anything useful in my `onEnter()` function. – Haywire Spark Dec 19 '14 at 19:37

0 Answers0