SHARE
TWEET

Untitled

a guest Aug 24th, 2019 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>Practice JavaScript by drawing</title>
  7. </head>
  8. <body>
  9.   <canvas id="myCanvas" height="300" width="450" style="border: 1px solid black"></canvas>
  10. <script id="jsbin-javascript">
  11. var canvas = document.getElementById('myCanvas');
  12. var context = canvas.getContext('2d');
  13.  
  14. var cH = canvas.height;
  15. var cW = canvas.width;
  16.  
  17. var y = 10;
  18. var x = 10;
  19. var number = 1;
  20.  
  21. for (var i = 0; i <=10; i++) {
  22.   if (number % 3 === 0) {
  23. context.fillStyle = 'blue';
  24. context.fillRect(y,x,30,30);
  25.   }else if (number % 5 === 0) {
  26.     context.fillStyle = 'yellow';
  27.     context.fillRect(y,x,30,30);
  28.   }else if(number % 5 === 0 && number % 3 == 0){
  29.     context.fillStyle = 'green';
  30.     context.fillRect(y,x,50,50);
  31.   }else {
  32.     context.fillStyle = 'grey';
  33.     context.fillRect(y,x,30,30);  
  34.   }
  35.  y = y+25;
  36.  x = x+25;
  37.  number = number + 1;
  38. }
  39. </script>
  40.  
  41.  
  42.  
  43. <script id="jsbin-source-javascript" type="text/javascript">var canvas = document.getElementById('myCanvas');
  44. var context = canvas.getContext('2d');
  45.  
  46. var cH = canvas.height;
  47. var cW = canvas.width;
  48.  
  49. var y = 10;
  50. var x = 10;
  51. var number = 1;
  52.  
  53. for (var i = 0; i <=10; i++) {
  54.   if (number % 3 === 0) {
  55. context.fillStyle = 'blue';
  56. context.fillRect(y,x,30,30);
  57.   }else if (number % 5 === 0) {
  58.     context.fillStyle = 'yellow';
  59.     context.fillRect(y,x,30,30);
  60.   }else if(number % 5 === 0 && number % 3 == 0){
  61.     context.fillStyle = 'green';
  62.     context.fillRect(y,x,50,50);
  63.   }else {
  64.     context.fillStyle = 'grey';
  65.     context.fillRect(y,x,30,30);  
  66.   }
  67.  y = y+25;
  68.  x = x+25;
  69.  number = number + 1;
  70. }</script></body>
  71. </html>
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