title: How to work external javascript in ASP.NET SignalR?
body: <p>I am new to asp.net signalR and I am trying to allow number of users to draw on canvas. The drawing logic is in a separate js file and I do not understand how to do it....</p>
  
  <p>Here is my html code</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Finger Painting&lt;/title&gt;
  
  &lt;script src="~/Scripts/draw.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;
  &lt;canvas id="canvas" width="1000" height="500" style="background-color:white"&gt;
    Your browser does not support the HTML 5 Canvas.
   &lt;/canvas&gt;
  &lt;/div&gt;
  &lt; div&gt;
  
  &lt;p&gt;Color selected: &lt;span id="color_chosen"&gt;Black&lt;/span&gt;&lt;/p&gt;
  &lt;p&gt;
  
  &lt;input type="button" id="Black" /&gt;
  &lt;/p&gt;
  &lt;p&gt;&lt;input type="button" id="reset_image" value="Reset Drawing"/&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my javascript code to draw on canvas:</p>
  
  <pre><code>window.addEventListener('load', eventWindowLoaded, false);
  function eventWindowLoaded() {
  canvasApp();
  }
  
  
  
    function canvasApp() {
  
   var c = document.getElementById('canvas');
   var context = c.getContext('2d');
  
     var blackButton = document.getElementById("Black");
  
     var colorChosen = document.getElementById("color_chosen");
    var resetButton = document.getElementById("reset_image");
  
     blackButton.addEventListener('click', colorPressed, false);
  
    drawScreen();
  
  
    function drawScreen() {
       c.addEventListener('mousedown', mouse_pressed_down, false);
       c.addEventListener('mousemove', mouse_moved, false);
       c.addEventListener('mouseup', mouse_released, false);
       c.addEventListener('touchmove', touch_move_gesture, false);
       context.fillStyle = 'white';
       context.fillRect(0, 0, c.width, c.height);
       context.strokeStyle = '#000000';
       context.strokeRect(1, 1, c.width - 2, c.height - 2);
   } 
  
  
    var begin_drawing = false;
  
     function mouse_pressed_down(ev) {
       begin_drawing = true;
      context.fillStyle = colorChosen.innerHTML;
    }
  
    function mouse_moved(ev) {
      var x, y;
            x = ev.pageX;
      y = ev.pageY;
  
       if (begin_drawing) {
          context.beginPath();
          context.arc(x, y, 7, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
          context.fill();
          context.closePath();
       }
    }
  
   function mouse_released(ev) {
      begin_drawing = false;
    }
  
  function touch_move_gesture(ev) {
  
      var x, y;
      ev.preventDefault(); 
      context.beginPath();
      context.fillStyle = colorChosen.innerHTML;
      if (ev.touches.length == 1) {
          var touch = ev.touches[0];
          x = touch.pageX;
          y = touch.pageY;
          context.arc(x, y, 7, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
          context.fill();
      }
   }
  
   function colorPressed(e) {
      var color_button_selected = e.target;
       var color_id = color_button_selected.getAttribute('id');
      colorChosen.innerHTML = color_id;
   }
  
   function resetPressed(e) {
      c.width = c.width; // Reset grid
      drawScreen();
   }
   }
  </code></pre>
  
  <p>Anyone an idea?</p>