とりあえずマルチタッチな小さいコードWebGL版。

multitouchwgl.html

<canvas width="512" height="512"></canvas><hr/>
<textarea id="LOG" cols="30" rows="10" value=""></textarea>
<script>"use strict";
let opt={preserveDrawingBuffer:true}
let cx=document.querySelector("canvas").getContext("webgl",opt);
cx.clearColor(0,0,0,1);cx.clear(0x4000);
cx.canvas.addEventListener("touchstart",hander,false);
cx.canvas.addEventListener("touchmove",hander,false);
function hander(e){
	e.preventDefault();
	let touches=e.changedTouches;
	for (let i=0; i<touches.length; i++){
		drawRect(touches[i].pageX,touches[i].pageY, i);
	}
}
function drawRect(x,y,num){
	let c=[[1,0,0],[0,1,0],[0,0,1],[0,1,1],[1,0,1],][num];
	cx.enable(cx.SCISSOR_TEST);	cx.scissor(x,512-y, 16,16);
	cx.clearColor(c[0],c[1],c[2],1);cx.clear(0x4000);
	LOG.value+=`(${x},${y}),[${c}]\n`;
}
</script>