md`# context2D Utilities`
function set_props(obj, props) {
Object.keys(props).forEach((d)=> {
obj[d] = props[d];
});
}
function drawText(ctx, cfg) {
let t_sty = {strokeStyle:"#000", fillStyle:"#000", lineWidth:1, textAlign:"left"};
let r_sty = {strokeStyle:"#000", fillStyle:"#fff", lineWidth:1};
let {x=0, y=0, txt="Hello", w=100, h=25, fontSize=12, fontFace="arial", rect=true, fill=true, stroke=false, tsty=t_sty, rsty=r_sty} = cfg;
ctx.save();
set_props(ctx, rsty)
if (rect) {
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.fill();
ctx.stroke();
}
ctx.beginPath();
set_props(ctx, tsty)
ctx.font = fontSize + "px " + fontFace;
let txtp = 0;
if (ctx.textAlign != "middle") txtp = 3;
ctx.fillText(txt, x+txtp, y+fontSize*1);
ctx.restore();
}
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.
