smol prog for drawing--standalone html

fyiwd.html

<script>
ce=(t)=>document.createElement(t);
c=ce("canvas"); u=ce("canvas");
b=document.body=ce("body")
b.style.margin=0
p=(c)=>{
c.width = innerWidth; c.height = innerHeight;
c.style.width="100%"; c.style.height="100%";
c.style.position = "absolute"; c.style.top=0;
b.append(c)
} 
p(c); p(u);
d=c.getContext('2d');
j=u.getContext('2d');
ae=(e,h)=>b.addEventListener(e,h)
var down = {};
ae('keydown', (e)=>{down[e.key]=true});
var eraser_size; var pen1 = {}; var pen2 = {radius:30};
ae('keydown', (e)=>{
	for (var i=0; i<=9; i++)
	{
		if (down[')!@#$%^&*('[i]])
			presets[i] = {...brush};
		if (down[i] && presets[i])
			brush = presets[i];
	}
	if (down.e)
	{
		pen1 = {...pen1};
		pen2 = {...pen2};
		brush.red = 255;
		brush.green = 255;
		brush.blue = 255;
		brush.radius = eraser_size || 100;
		eraser_size = brush.radius;
	}
	if (down.p)
	{
		brush.red = pen1.red || 0;
		brush.green = pen1.blue || 0;
		brush.blue = pen1.green || 0;
		brush.radius = pen1.size || 3;
		pen1 = brush;
	}
	if (down.b)
	{
		brush.red = pen2.red || 0;
		brush.green = pen2.blue || 0;
		brush.blue = pen2.green || 0;
		brush.radius = pen2.size || 30;
		pen2 = brush;
	}
});
ae('keyup', (e)=>{down[e.key]=false});
circle=(d,nbp)=>(x,y,r)=>{
	if (!nbp) d.beginPath();
	for (var i=0; i<64; i++)
		d.lineTo(x+r*Math.cos(i/10), y+r*Math.sin(i/10))
}

var brush = {radius: 40, red: 0, green: 0, blue: 0, alpha: 255};
for (i in pen2) brush[i] = pen2[i];
var ranges = {radius: [1,200]};
var presets={}
pad = (v)=>(""+v).padStart(2,0);
ae('mousedown', (e)=>{down.z = true});
ae('mouseup', (e)=>{down.z = false});
var prevloc
ae('mousemove', (e)=>{
  var [x,y] = [e.offsetX, e.offsetY]
	var {radius, red, green, blue, alpha} = brush;	
	var [r,cr,cg,cb,ca] = [radius, red, green, blue, alpha];
	d.fillStyle = `rgba(${cr},${cg},${cb},${ca/255})`;
  if (down.z)
	{
		d.beginPath()
		circle(d)(x,y,r);
		if (prevloc)
		{
			var intrp=300;
			var [px,py,pr] = prevloc;
			for (var i=0; i<intrp; i++)
			{
				circle(d,1)(px+(x-px)*i/intrp, py+(y-py)*i/intrp, r);
			}
		}
		d.fill();
		prevloc = [x,y,r]
	}
	else
		prevloc = undefined;
	j.clearRect(0,0,innerWidth,innerHeight);
	j.fillStyle = `rgba(${cr},${cg},${cb},${ca/255/2})`;
	circle(j)(x,y,r);
	if ((cr==255 && cg==255 && cb==255) || ca<20)
		{j.fill(); j.stroke()}
	else if (down.a)
		j.stroke();
	else
		{j.fill(); j.stroke()}

	if (down.s)
		brush.red += e.movementX/4;
	if (down.d)
		brush.green += e.movementX/4;
	if (down.f)
		brush.blue += e.movementX/4;
	if (down.x)
		brush.alpha += e.movementX/4;
	if (down.a)
		brush.radius += e.movementX/4;
	for (var i in brush)
	{
		var rng = ranges[i] || [0,255];
		brush[i] = Math.max(rng[0], Math.min(rng[1], brush[i]));
	}
});
</script>