SHARE
TWEET

Untitled

a guest Sep 17th, 2019 250 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Thanks to Jagadesha NH:
  2. // https://medium.com/@jagadeshanh/html5-canvas-click-and-draw-f665e02f5744
  3.  
  4. var canvas = document.getElementsByTagName("canvas")[0];
  5. var context = canvas.getContext("2d");
  6. var height = canvas.height = window.innerHeight;
  7. var width = canvas.width = window.innerWidth;
  8. var mouseClicked = false, mouseReleased = true;
  9. var  x0 = 50;
  10.   y0 = 30;
  11.   bredd =40;
  12.   hojd = 40;
  13.   distance = 40;
  14.   color = "green";
  15.   radie = 10;
  16.   size = 22;
  17.  
  18. document.addEventListener("click", onMouseClick, false);
  19. document.addEventListener("mousemove", onMouseMove, false);
  20. function onMouseClick(e) {
  21.     mouseClicked = !mouseClicked;
  22. }
  23. function onMouseMove(e) {
  24.     if (mouseClicked) {
  25.         context.beginPath();
  26.         context.arc(e.clientX, e.clientY, 7.5, 0, Math.PI * 2, false);
  27.         context.lineWidth = 5;
  28.         context.strokeStyle = color;
  29.         context.stroke();
  30.     }
  31. //en mouse over-funktion
  32. if ((e.clientX > x0) && (e.clientX < x0 + bredd) && (e.clientY > y0)
  33.       && (e.clientY < y0 + hojd))  { color = "green"; }
  34. }
  35.  
  36. // H�r b?rjar koden inspirerad av spelprogrammering.nu
  37.  
  38.  
  39. function myRectangle(x, y, w, l, color)
  40. {
  41.    context.fillStyle = color
  42.    context.fillRect(x, y, w, l);
  43. }
  44.  
  45. function myText(x, y, size, text, color)
  46. {
  47.   context.font = size + "pt Helvetica";
  48.   context.fillStyle = color;
  49.   context.fillText(text, x, y);
  50. }
  51.  
  52. // rita de f?rgade rutorna
  53.    this.myRectangle(x0, y0, bredd, hojd, "green");
  54.    this.myRectangle(x0, y0 + distance, bredd, hojd, "blue");
  55.    this.myText(x0-30, y0 + distance+25, 18, "b", "blue");
  56.    this.myRectangle(x0, y0 + 2 * distance, bredd, hojd, "yellow");
  57.    this.myRectangle(x0, y0 + 3 * distance, bredd, hojd, "pink");
  58.  
  59. // v?lj f?rg att rita med
  60. window.addEventListener('keydown',this.check,false);
  61.  
  62. // function check(e) {
  63. //    alert(e.keyCode);
  64. //}
  65.  
  66. function check(e) {
  67.     var code = e.keyCode
  68. // �ndra f�rg
  69.     if (code == 71)
  70.         color = "green";
  71.     if (code == 66)
  72.         color = "blue";
  73.     if (code == 89)
  74.         color = "yellow";
  75.     if (code == 80)
  76.         color = "pink";
  77. // �ndra radie
  78. if (code == 49)
  79.     radie = 5;
  80. if (code == 50)
  81.     radie = 10;
  82. }
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top