Fiddling with display

This commit is contained in:
Neale Pickett 2023-03-11 16:51:15 -07:00
parent a33be0e8fd
commit c1e9e0fc0d
2 changed files with 11 additions and 2 deletions

View File

@ -10,8 +10,10 @@ html, body {
margin: 0; margin: 0;
} }
#pie canvas { #pie canvas {
max-width: 50px; max-width: 20vw;
max-height: 20vh;
position: absolute; position: absolute;
opacity: 90%;
} }
#area canvas { #area canvas {
width: 100vw; width: 100vw;

View File

@ -108,7 +108,7 @@ class PieChart extends Chart{
this.ctx.fillStyle = this.colors[i] this.ctx.fillStyle = this.colors[i]
this.ctx.beginPath() this.ctx.beginPath()
this.ctx.arc(0, 0, this.r, θ, θ + angle, false) this.ctx.arc(0, 0, this.r, θ, θ + angle)
this.ctx.lineTo(0, 0) this.ctx.lineTo(0, 0)
this.ctx.fill() this.ctx.fill()
@ -126,6 +126,13 @@ class PieChart extends Chart{
} }
θ += angle θ += angle
} }
// Put a border around it
this.ctx.strokeStyle = "silver"
this.ctx.lineWidth = 5
this.ctx.beginPath()
this.ctx.arc(0, 0, this.r - this.ctx.lineWidth/2, 0, τ)
this.ctx.stroke()
this.ctx.restore() this.ctx.restore()
} }
} }