Blizzardo1/canvas.js

## canvas.js
class Graphics {
    constructor(board) {
        this.board = board;
    }

    circle(x, y, r, fill=false) {
        this.canvas.beginPath();
        this.canvas.arc(x, y, r, 0, 2 * Math.PI);
        this.canvas.stroke();
        if(fill) {
            this.canvas.fill();
        }
    }

    draw() {
        this.x = 0;
        this.y = 0;
        this.w = 100;
        this.h = 100;
        this.r = this.w / 2;
        this.canvas = /** @type {CanvasRenderingContext2D} */ (document.getElementById(this.board).getContext("2d"));
        this.canvas.fillStyle = 'red';
        this.canvas.fillRect(this.x, this.y, this.w, this.h);

        this.canvas.fillStyle = 'blue';
        this.circle(this.x + this.r, this.y + this.r, this.r - 2, true);
        for(let i = this.r; i > 0; i -= 6) {
            this.canvas.strokeStyle = 'white';
            this.circle(this.r, this.r, i);
        }
    }
}

var g = new Graphics("board");

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Graphics Test</title>
        <link rel="stylesheet" href="css/styles.css">
        <script type="text/javascript" src="scripts/canvas.js"></script>
    </head>
    <body onload="g.draw()">
        <canvas id="board">
        </canvas>
    </body>
</html>
	class Graphics {
	constructor(board) {
	this.board = board;
	}

	circle(x, y, r, fill=false) {
	this.canvas.beginPath();
	this.canvas.arc(x, y, r, 0, 2 * Math.PI);
	this.canvas.stroke();
	if(fill) {
	this.canvas.fill();
	}
	}

	draw() {
	this.x = 0;
	this.y = 0;
	this.w = 100;
	this.h = 100;
	this.r = this.w / 2;
	this.canvas = /** @type {CanvasRenderingContext2D} */ (document.getElementById(this.board).getContext("2d"));
	this.canvas.fillStyle = 'red';
	this.canvas.fillRect(this.x, this.y, this.w, this.h);

	this.canvas.fillStyle = 'blue';
	this.circle(this.x + this.r, this.y + this.r, this.r - 2, true);
	for(let i = this.r; i > 0; i -= 6) {
	this.canvas.strokeStyle = 'white';
	this.circle(this.r, this.r, i);
	}
	}
	}

	var g = new Graphics("board");
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Graphics Test</title>
	<link rel="stylesheet" href="css/styles.css">
	<script type="text/javascript" src="scripts/canvas.js"></script>
	</head>
	<body onload="g.draw()">
	<canvas id="board">
	</canvas>
	</body>
	</html>