title: How to make rotatable figures?
body: <p>I’m using javascript for writing a game. And I’m completely in trouble with such problem: 
  If you click once on board (canvas) it draws circle and important is that it has to be rotatable (so that you can rotate it on four positions: 0, 90, 180, 270 degrees). Once the player has chosen the position, klicks secondly on the screen and the position will be fixed. The solution must not use the board like in illustration is demonstrated(it can be done just on clean canvas.)
  I look forward to your response! your help would be really useful, and sorry if my question is stupid but I'm still just a beginner.
  Thank you in advance for your response!</p>
  
  <p>Here above is an illustration and the code(for drawing X and O):</p>
  
  <p><a href="https://i.stack.imgur.com/vFsjv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vFsjv.png" alt="Illustration"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("canvas").addEventListener("click", function(event) {
    onClick(event);
  });
   var ctx = canvas.getContext("2d");
  
   function drawX(x, y) {
  
  ctx.beginPath();
  
  ctx.moveTo(x + -36, y + -35);
  
  ctx.lineTo(x + 35, y + 36);
  
  ctx.moveTo(x + -36, y + 35);
  
  ctx.lineTo(x + 35, y + -36);
  
  ctx.moveTo(x + -36, y + -35);
  
  ctx.lineTo(x + 0, y - 75);
  
  ctx.moveTo(x + 36, y + -35);
  
  ctx.lineTo(x + 0, y - 75); 
  
  ctx.moveTo(x + -36, y + -35);
  
  ctx.lineTo(x + 35, y + -36);
  
  ctx.stroke();
  
  }
  
    function drawO(x, y, r) {
  
    ctx.beginPath();
  
    ctx.arc(x, y, r, 0, Math.PI * 2, true);
  
    ctx.strokeStyle = "Indigo";
     
    ctx.lineWidth = 2;
  
    ctx.moveTo(x + -36, y + -35);
  
  ctx.lineTo(x + 0, y - 75);
  
  ctx.moveTo(x + 36, y + -35);
  
  ctx.lineTo(x + 0, y - 75); 
    
  ctx.moveTo(x + -36, y + -35);
  
  ctx.lineTo(x + 35, y + -36);
  
    ctx.stroke();
  
  }
  
    var x = e.x - canvas.offsetLeft;
  
    var y = e.y - canvas.offsetTop;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas" &gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>