seed, teach, grow
Published
Edited
Jul 1, 2019
appendChildTest = {
let D = html`<div>`,
heading = html`<h3>Space for drawing`;
D.appendChild(heading);
return D
}
test = {
// const canvas = DOM.canvas(dim.x, dim.y);
let div = html`<div>`,
heading = html`<h3>Space for drawing`;
div.appendChild(heading);
let cvs = Object.values(set_contexts(div, 4).cvs);
for (let canvas of cvs){
debugger;
let ctx = canvas.getContext('2d');
ctx.fillStyle = "#f0f";
ctx.fillRect(0,0,dim.sub.x, dim.sub.y);
ctx.fill();
ctx.stroke();
}
return div
}
shapes ={
const cvs = DOM.canvas(dim.x, dim.y);
const ctx = cvs.getContext('2d');
ctx.fillStyle = "#f0f";
ctx.fillRect(0,0,80,80);
// ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
ctx.beginPath();
ctx.arc(dim.x / 4 , dim.y/2,40,0, 2*Math.PI, true);
ctx.fillStyle = "#0f0";
ctx.fill();
// portion of circle
ctx.beginPath();
ctx.arc(dim.x * 2/4, dim.y/2 ,40,0, 3/4*Math.PI, true);
ctx.fillStyle = "#0ff";
ctx.fill();
// portion of circl
ctx.beginPath();
ctx.arc(dim.x * 3/4, dim.y/2,40,0, 3/4*Math.PI, true);
ctx.strokeStyle = "#000";
ctx.fillStyle = "#ff0";
ctx.fill(); // do the actual filling
ctx.stroke(); // do the stroke
return cvs
}
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.
