マウスの座標を取得するコマンドは「clientX」，「clientY」です。これはブラウザのウィンドウの左上部分が基準になるようです。それに対して，lab.jsのキャンバスの座標は画面中央ですので，そのままではちょっと使いにくいです。そこで，ブラウザの表示領域の座標も取得し，画面中央が座標の中心になるように補正をすると使いやすいと思います。
以下の条件分岐は，画面の左側と右側で異なった処理をするためのプログラムです。
if(e.clientX - document.documentElement.clientWidth / 2 < 0){
// 処理1
}else if(e.clientX - document.documentElement.clientWidth / 2 > 0){
// 処理2
}
まずは，「Content」に以下のような文字を入力します。
以下のコードをScriptsにコピーしてください。このプログラムは，「numdata」という変数の中身を入れ替えて，それを画面に表示します。初期値は0で，「右側」を押すたびに「+1」となり，「左側」を押すたびに「-1」となるようにしました。数字が20を超えたところで実験が終了となります。
var numdata = 0;
this.options.events['click'] = function(e) {
// total score
this.parameters.numdata = numdata;
if(numdata > 20){
//component end
this.end();
}
if(e.clientX - document.documentElement.clientWidth / 2 < 0){
numdata = numdata -1;
}else if(e.clientX - document.documentElement.clientWidth / 2 > 0){
numdata = numdata +1;
}
if(numdata > 20){
//component end
this.end();
}else{
// add new canvas component
const canvas = this.options.el.querySelector('canvas');
const ctx = canvas.getContext("2d");
// clear
ctx.clearRect(-ctx.canvas.clientWidth/2, -ctx.canvas.clientHeight/2, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
// redraw
ctx.font = "40px 'sans-serif'";
ctx.textAlign = "center"
ctx.fillStyle = "red";
ctx.fillText(numdata, 0, -50);
}
}
このプログラムを応用すれば，擬似AOIのような動きをするプログラムも作ることができるでしょう。
以下，プログラムのファイルです。