API tools faq
paste
476179

B-drawingLines

476179
Nov 29th, 2018
132
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.58 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>B-DrawingLines</title>
  6. </head>
  7.  
  8. <body>
  9.  
  10. <canvas id="Canvas1" width="500" height="200" style="border:1px solid black";>
  11. </canvas>
  12. <canvas id="Canvas2" width="500" height="200" style="border:1px solid black";>
  13. </canvas>
  14. <canvas id="Canvas3" width="500" height="200" style="border:1px solid black";>
  15. </canvas>
  16. <script>
  17.  
  18. var theCanvas = document.getElementById("Canvas1");
  19. var drawingTools =theCanvas.getContext("2d");
  20.  
  21. //draw simple lines
  22. drawingTools.beginPath();
  23. drawingTools.lineWidth = 1;
  24. drawingTools.moveTo(0,0);
  25. drawingTools.lineTo(500,200);
  26. drawingTools.stroke();
  27.  
  28. theCanvas = document.getElementById("Canvas2");
  29. drawingTools =theCanvas.getContext("2d");
  30.  
  31. // ends of lines , called line caps
  32. drawingTools.strokeStyle = "red";
  33. drawingTools.beginPath();
  34. drawingTools.lineWidth = 1;
  35. drawingTools.moveTo(50,25);
  36. drawingTools.lineTo(50,175);
  37. drawingTools.moveTo(450,25);
  38. drawingTools.lineTo(450,175);
  39. drawingTools.stroke();
  40.  
  41. drawingTools.strokeStyle = "cyan";
  42. drawingTools.lineWidth = 25;
  43.  
  44. // draw line using linecap method - butt
  45. drawingTools.lineCap = "butt";
  46. drawingTools.beginPath();
  47. drawingTools.moveTo(50,50);
  48. drawingTools.lineTo(450,50);
  49. drawingTools.stroke();
  50.  
  51. // draw line using linecap method - round
  52. drawingTools.lineCap = "round";
  53. drawingTools.beginPath();
  54. drawingTools.moveTo(50,100);
  55. drawingTools.lineTo(450,100);
  56. drawingTools.stroke();
  57.  
  58. // draw line using linecap method - square
  59. drawingTools.lineCap = "square";
  60. drawingTools.beginPath();
  61. drawingTools.moveTo(50,150);
  62. drawingTools.lineTo(450,150);
  63. drawingTools.stroke();
  64.  
  65.  
  66.  
  67. theCanvas = document.getElementById("Canvas3");
  68. drawingTools =theCanvas.getContext("2d");
  69. drawingTools.strokeStyle = "black";
  70. drawingTools.lineWidth = 15;
  71.  
  72. // draw lines using lineJoin mathod - round
  73. drawingTools.lineJoin = "round";
  74. drawingTools.beginPath();
  75. drawingTools.moveTo(25,150);
  76. drawingTools.lineTo(75,50);
  77. drawingTools.lineTo(125,150);
  78. drawingTools.stroke();
  79.  
  80. // draw lines using lineJoin mathod - bevel
  81. drawingTools.lineJoin = "bevel";
  82. drawingTools.beginPath();
  83. drawingTools.moveTo(175,150);
  84. drawingTools.lineTo(225,50);
  85. drawingTools.lineTo(275,150);
  86. drawingTools.stroke();
  87.  
  88. // draw lines using lineJoin mathod - miter
  89. drawingTools.lineJoin = "miter";
  90. drawingTools.miterLimit = 20;
  91. drawingTools.beginPath();
  92. drawingTools.moveTo(325,150);
  93. drawingTools.lineTo(375,50);
  94. drawingTools.lineTo(425,150);
  95. drawingTools.stroke();
  96.  
  97.  
  98. </script>
  99. </body>
  100.  
  101. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!