Freelancing Data Visualization Designer & Artist
canvas_1 = {
const s = 500
const r = s * 0.7
const context = DOM.context2d(s, s)
context.shadowBlur = 10
context.shadowColor = "#9b9b9b"
context.fillStyle = "#f4f1ef"
context.translate(s/2, s/2)
// Draw the rectangle with a circular hole in the center
context.beginPath()
context.rect(-r/2, -r/2, r, r) //Draw the rectangle, default is done clockwise
context.arc(0, 0, r * 0.4, 0, Math.PI*2, true) //Draw the circle, but counterclockwise (final argument is true)
context.fill()
return context.canvas
}
canvas_2 = {
const s = 500
const r = s * 0.7
const context = DOM.context2d(s, s)
context.shadowBlur = 10
context.shadowColor = "#9b9b9b"
context.fillStyle = "#f4f1ef"
context.translate(s/2, s/2)
// Create a clipping path that has the same circle as the "hole"
context.save()
context.beginPath()
context.arc(0, 0, r * 0.4, 0, Math.PI*2)
context.clip()
// Draw the rectangle with a circular hole in the center
context.beginPath()
context.rect(-r/2, -r/2, r, r) //Draw the rectangle, default is done clockwise
context.arc(0, 0, r * 0.4, 0, Math.PI*2, true) //Draw the circle, but counterclockwise (final argument is true)
context.fill()
// Restore from the clipping path
context.restore()
return context.canvas
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
