mohsenheydari

drawO(x, y){
  let halfCellSize = (0.5 * this.cellSize);
  let centerX  = x + halfCellSize;
  let centerY  = y + halfCellSize;
  let radius   = (this.cellSize * 0.7) / 2;
  let endAngle = 2 * Math.PI;

  this.ctx.lineWidth   = this.oLineWidth;
  this.ctx.strokeStyle = this.oStyle;
  this.ctx.beginPath();

mohsenheydari

drawX(x, y){
  this.ctx.lineWidth = this.xLineWidth;
  this.ctx.strokeStyle = this.xStyle;
  this.ctx.beginPath();

  let offset = this.cellSize * 0.25;
  this.ctx.moveTo(x + offset, y + offset);
  this.ctx.lineTo(x + this.cellSize - offset, y + this.cellSize - offset);

  this.ctx.moveTo(x + offset, y + this.cellSize - offset);

mohsenheydari

drawCells(boardState){

  boardState.forEach(function(el, i){
    let x = (i % 3) * this.cellSize;
    let y = Math.floor(i/3) * this.cellSize;

    if(el === 1){
      this.drawX(x, y);
    } else if(el === 2){
      this.drawO(x, y);

mohsenheydari

<div class="center-wrapper-parent">
  <div class="canvas-wrapper">
	<canvas id="board"></canvas>
  </div>
</div>
<script data-main="js/main" src="js/require.js"></script>

mohsenheydari

class GmaeBoardRenderer{
	constructor(canvas, canvasSize){
		...
	}

	render(boardState){
		...
	}

	drawCells(boardState){