<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js" type="text/javascript">
</script><script language="javascript" type="text/javascript">

function setup() {
  createCanvas(601, 601);
  stroke(0);// 線の白さ
  fill(250, 20, 20);
 // fill(0, 0, 0);
}

function draw() {
  background(200);// 背景の白さ
  mouseDragged(x);

}

function mouseDragged(x) {
 var X=mouseX; var Y=mouseY;
  ellipse(X, Y , 10); // 線の太さ
var L=pow(pow(X-width/2,2)+pow(Y-height/2,2),0.5);
var angle=atan2(height/2-Y,X-width/2);
for (var i=1; i<4; i++) {
a=angle-PI/4*i*2;
 ellipse(width/2+L*cos(a),height/2-L*sin(a),10);
}
for (var i=0; i<4; i++) {
a=PI/2-angle+PI/4*i*2;
 ellipse(width/2+L*cos(a),height/2-L*sin(a),10);
}
}
</script>

このページの下でもお絵かきアプリが動きます。左下の灰色のウインドウでマウスをクリックしながら動かすと対称な絵を描きます。

javascript, p5.jsのプログラムは「java phpなど」のページにあります。