Start setting up the basic board
This commit is contained in:
parent
0b0bd1e14b
commit
1e65219401
|
@ -5,18 +5,21 @@ export class GoBoard extends HTMLCanvasElement {
|
|||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
console.log("Go Board constructor");
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
console.log("connected callback");
|
||||
this.setAttribute("width", "500");
|
||||
this.setAttribute("height", "500");
|
||||
this.classList.add("go-board");
|
||||
const ctx = this.getContext("2d");
|
||||
if (!ctx) {
|
||||
alert("could not get the canvas context");
|
||||
return;
|
||||
}
|
||||
ctx.fillStyle = "green";
|
||||
ctx.fillRect(10, 10, 150, 150);
|
||||
ctx.fillStyle = "rgb(128, 128, 128)";
|
||||
ctx.fillRect(10, 10, 50, 50);
|
||||
|
||||
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
|
||||
ctx.fillRect(30, 30, 50, 50);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -13,3 +13,7 @@ body {
|
|||
display: grid;
|
||||
}
|
||||
|
||||
.go-board {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue