global css body m:0 p:0 rd:lg bg:yellow1 of:hidden
tag value-picker
	css w:100px h:40px pos:rel
		d:hgrid ji:center ai:center
	css .item h:100% pos:rel tween:styles 0.1s ease-out

	def update e
		data = options[e.x]

	<self @touch.stop.fit(0,options.length - 1,1)=update>
		for item in options
			<div.item[$value:{item}] .sel=(item==data)>

tag stroke-picker < value-picker
	css .item bg:black w:calc($value*1px) h:40% rd:sm
		o:0.3 @hover:0.8 .sel:1

tag color-picker < value-picker
	css .item js:stretch rdt:lg bg:$value mx:2px scale-y.sel:1.5

tag app-canvas
	prop dpr = window.devicePixelRatio
	prop state = {}

	def draw e
		let path = e.#path ||= new Path2D
		let ctx = $canvas.getContext('2d')
		path.lineTo(e.x * dpr,e.y * dpr)
		ctx.lineWidth = state.stroke * dpr
		ctx.strokeStyle = state.color
		ctx.stroke(path)
	
	def resized e
		$canvas.width = offsetWidth * dpr
		$canvas.height = offsetHeight * dpr

	<self @resize=resized @touch.prevent.moved.fit(self)=draw>
		<canvas$canvas[pos:abs w:100% h:100%]>

const strokes = [1,2,3,5,8,12]
const colors = ['#F59E0B','#10B981','#3B82F6','#8B5CF6']
const state = {stroke: 5, color: '#3B82F6'}

tag App
	<self>
		<div[ta:center pt:20 o:0.2 fs:xl]> 'draw here'
		<app-canvas[pos:abs inset:0] state=state>
		<div.tools[pos:abs b:0 w:100% d:hgrid ja:center]>
			<stroke-picker options=strokes bind=state.stroke>
			<color-picker options=colors bind=state.color>

imba.mount <App[pos:abs inset:0]>

# from https://imba.io
# run online at https://scrimba.com/scrim/cPPdD4Aq