Canvas play 1

by Anton

HTML

<canvas width="400" height="400" />

CSS

canvas {
    border: solid 1px darkgrey;
}

JavaScript

let cv = document.querySelector("canvas");
let cx = cv.getContext("2d");

const N = 25;
const size = Math.round(cv.getAttribute('width') / N);
const halfPI = Math.PI / 2;

class Cell {
	constructor(x, y) {
    	this.x = x; 
        this.y = y;
        this.type = Math.round(Math.random());
    }
    
    draw(cx) {
    	const offsetX = this.x * size;
        const offsetY = this.y * size;
        
        cx.beginPath();
        if(this.type == 0) {
        	cx.arc(this.x * size, (this.y + 1) * size, size/2, -halfPI, 0);
            cx.moveTo((this.x + 0.5) * size, this.y * size);
            cx.arc((this.x + 1) * size, this.y * size, size/2, Math.PI, halfPI, true);
        } else { // type 1
        	cx.arc(this.x * size, this.y * size, size/2, 0, halfPI);
            cx.moveTo((this.x + 1) * size, (this.y + 0.5) * size);
            cx.arc((this.x + 1) * size, (this.y + 1) * size, size/2, -halfPI, -Math.PI, true); // anti-clockwise
        }
        cx.stroke();
    }
}

let cells = getCells();
drawCells();

return;

// ----------------------------------------

function getCells() {
	let arr = [];
    
    for(let y = 0; y < N; y++) {
    	arr.push([]);
    	for(let x = 0; x < N; x++) {
        	arr[y].push(new Cell(x, y));
        }
    }
    
    return arr;
}

function drawCells() {
	for(let row of cells) {
    	for(let cell of row) {
        	cell.draw(cx);
        }
    }
}