daily pastebin goal
67%
SHARE
TWEET

Untitled

a guest Jun 13th, 2018 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var canvas = document.getElementById('dessin');
  2. var context1 = canvas.getContext('2d');
  3. var context2 = canvas.getContext('2d');
  4.  
  5. context1.beginPath();
  6. context1.arc(100, 100, 50, 0, 2 * Math.PI);
  7. context1.fill();
  8. context1.closePath();
  9.  
  10. context2.beginPath();
  11. context2.fillStyle = 'red';
  12. context2.arc(200, 200, 50, 0, 2 * Math.PI);
  13. context2.fill();
  14. context2.closePath();
  15.  
  16.  
  17. document.getElementById('clearCanvas1').onclick = function(){
  18.    context1.clearRect(0,0,canvas.width, canvas.height);
  19. };
  20.    
  21. var canvas = document.getElementById("design");
  22. var context = canvas.getContext('2d');
  23.    
  24. context.beginPath();
  25. context.arc(100, 100, 50, 0, 2 * Math.PI);
  26. context.fill();
  27. context.closePath();
  28.  
  29. context.beginPath();
  30. context.fillStyle = 'red';
  31. context.arc(200, 200, 50, 0, 2 * Math.PI);
  32. context.fill();
  33. context.closePath();
  34.    
  35. context.clearRect(50, 50, 100, 100);
  36.    
  37. <style>
  38.     .canvasHolder{
  39.         position: relative;
  40.         height: 500px; width: 500px; //based on your canvas size
  41.     }
  42.     .canvas{
  43.         position: absolute;
  44.         top: 0; left: 0;
  45.     }
  46. </style>
  47.  
  48. <div class="canvasHolder">
  49.     <canvas class="canvas" id="dessin1" width="500" height="500"> ... </canvas>
  50.     <canvas class="canvas" id="dessin2" width="500" height="500"> ... </canvas>
  51. </div>
  52.  
  53. <button id="clearCanvas1"> Clear canvas1 (black circle) </button>
  54.    
  55. var canvas1 = document.getElementById('dessin1');
  56. var context1 = canvas1.getContext('2d');
  57.  
  58. var canvas2 = document.getElementById('dessin2');
  59. var context2 = canvas2.getContext('2d');
  60.  
  61. context1.beginPath();
  62. context1.arc(100, 100, 50, 0, 2 * Math.PI);
  63. context1.fill();
  64. context1.closePath();
  65.  
  66. context2.beginPath();
  67. context2.fillStyle = 'red';
  68. context2.arc(200, 200, 50, 0, 2 * Math.PI);
  69. context2.fill();
  70. context2.closePath();
  71.  
  72.  
  73. document.getElementById('clearCanvas1').onclick = function(){
  74.     context1.clearRect(0,0,canvas.width, canvas.height);
  75. };
RAW Paste Data
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
 
Top