Advertisement
Guest User

Untitled

a guest
Aug 20th, 2019
77
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.04 KB | None | 0 0
  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 a = 250;
  15. var b = 50;
  16. var cw = 450;
  17. var ch = 300;
  18.  
  19. context.fillStyle = 'red';
  20. context.fillRect(b-50,a-250,cw,ch);
  21.  
  22. context.fillStyle = 'white';
  23. context.fillRect(b-50,a-150,cw,ch);
  24.  
  25. context.fillStyle = 'green';
  26. context.fillRect(b-50,a-50,cw,ch);
  27. </script>
  28.  
  29.  
  30.  
  31. <script id="jsbin-source-javascript" type="text/javascript">var canvas = document.getElementById('myCanvas');
  32. var context = canvas.getContext('2d');
  33.  
  34. var a = 250;
  35. var b = 50;
  36. var cw = 450;
  37. var ch = 300;
  38.  
  39. context.fillStyle = 'red';
  40. context.fillRect(b-50,a-250,cw,ch);
  41.  
  42. context.fillStyle = 'white';
  43. context.fillRect(b-50,a-150,cw,ch);
  44.  
  45. context.fillStyle = 'green';
  46. context.fillRect(b-50,a-50,cw,ch);</script></body>
  47. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement