How to work external javascript in ASP.NET SignalR? -


i new asp.net signalr , trying allow number of users draw on canvas. drawing logic in separate js file , not understand how it....

here html code

<html lang="en"> <head> <title>finger painting</title>  <script src="~/scripts/draw.js"></script> </head> <body> <div> <canvas id="canvas" width="1000" height="500" style="background-color:white">   browser not support html 5 canvas.  </canvas> </div> < div>  <p>color selected: <span id="color_chosen">black</span></p> <p>  <input type="button" id="black" /> </p> <p><input type="button" id="reset_image" value="reset drawing"/></p> </div> </body> </html> 

here javascript code draw on canvas:

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();  }  } 

anyone idea?


Comments

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

.htaccess - Matching full URL in RewriteCond -