Michal_Pilarski

script.js

Apr 16th, 2021
663
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const canvas = document.getElementById("canvas");
  2. canvas.width = window.innerWidth - 700;
  3. canvas.height = 700;
  4.  
  5. let context = canvas.getContext("2d");
  6. let startBackgroundColor = "white";
  7. context.fillStyle = startBackgroundColor;
  8. context.fillRect(0, 0, canvas.width, canvas.height);
  9.  
  10. let draw_color = "black";
  11. let draw_width = "2";
  12. let is_drawing = false;
  13.  
  14. let Restore_array = [];
  15. let index = -1;
  16.  
  17. let drawData = {
  18.     x: '',
  19.     y: '',
  20.     color: ''
  21. };
  22.  
  23. function change_color(element)
  24. {
  25.     draw_color = element.style.backgroundColor;
  26. }
  27.  
  28. function clear_canvas()
  29. {
  30.     context.fillStyle = startBackgroundColor;
  31.     context.clearRect(0,0,canvas.width,canvas.height);
  32.     context.fillRect(0,0,canvas.width,canvas.height);
  33.     Restore_array = [];
  34.     index = -1;
  35. }
  36.  
  37. function undo()
  38. {
  39.     if(index<=0)
  40.     {
  41.         clear_canvas();
  42.     }
  43.     else
  44.     {
  45.         index--;
  46.         Restore_array.pop();
  47.         context.putImageData(Restore_array[index], 0, 0); // undo
  48.     }
  49. }
  50.  
  51. canvas.addEventListener("touchstart", start, false); // touchstart i touchmove pozwala na rysowanie na telefonie itp
  52. canvas.addEventListener("touchmove", draw, false);
  53. canvas.addEventListener("mousedown", start, false);
  54. canvas.addEventListener("mousemove", draw, false);
  55.  
  56. canvas.addEventListener("touchend", stop, false);
  57. canvas.addEventListener("mouseup", stop, false);
  58. canvas.addEventListener("mouseout", stop, false);
  59.  
  60. socket.on('getPaint', function(drawData){
  61.     context.beginPath();
  62.     context.lineTo(drawData.x - canvas.offsetLeft, drawData.y - canvas.offsetTop);
  63.     context.strokeStyle = drawData.color;
  64.     context.lineWidth = draw_width;
  65.     context.lineCap = "round";
  66.     context.lineJoin = "round";
  67.     context.stroke();
  68.     console.log(drawData);
  69. });
  70.  
  71. function start(event)
  72. {
  73.     is_drawing = true;
  74.     context.beginPath();
  75.     context.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
  76.     console.log('moveTo',event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
  77.     event.preventDefault();
  78. }
  79.  
  80. function draw(event)
  81. {
  82.     if(is_drawing)
  83.     {
  84.         context.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
  85.         console.log('lineTo',event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
  86.         context.strokeStyle = draw_color;
  87.         context.lineWidth = draw_width;
  88.         context.lineCap = "round";
  89.         context.lineJoin = "round";
  90.         context.stroke();
  91.         //console.log(event.clientX, ' ', event.clientY);
  92.  
  93.         drawData.x = event.clientX;
  94.         drawData.y = event.clientY;
  95.         drawData.color = draw_color;
  96.         socket.emit('drawing',drawData);
  97.     }
  98. }
  99.  
  100. function stop(event)
  101. {
  102.     if(is_drawing)
  103.     {
  104.         context.stroke();
  105.         context.closePath();
  106.         is_drawing = false;
  107.     }
  108.     event.preventDefault();
  109.  
  110.     if(event.type != 'mouseout')
  111.     {
  112.         Restore_array.push(context.getImageData(0,0,canvas.width,canvas.height)) // każde zastopowanie dodaje narysowany element do tablicy
  113.         index++;
  114.     }
  115. }
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×