This is the code for a mirror draw tool using p5.js 
How can I implement the line of reflection using html element instead of canvas
function mirrorDrawTool() {
 this.name = "mirrorDraw";
 this.icon = "assets/mirrorDraw.jpg";

 //which axis is being mirrored (x or y) x is default
 this.axis = "x";
 //line of symmetry is halfway across the screen
 this.lineOfSymmetry = width / 2;

 //this changes in the jquery click handler. So storing it as
 //a variable self now means we can still access it in the handler
 var self = this;

 //where was the mouse on the last time draw was called.
 //set it to -1 to begin with
 var previousMouseX = -1;
 var previousMouseY = -1;

 //mouse coordinates for the other side of the Line of symmetry.
 var previousOppositeMouseX = -1;
 var previousOppositeMouseY = -1;

 this.draw = function () {
 //display the last save state of pixels
 updatePixels();

 //do the drawing if the mouse is pressed
 if (mouseIsPressed) {
 //if the previous values are -1 set them to the current mouse location
 //and mirrored positions
 if (previousMouseX == -1) {
 previousMouseX = mouseX;
 previousMouseY = mouseY;
 previousOppositeMouseX = this.calculateOpposite(mouseX, "x");
 previousOppositeMouseY = this.calculateOpposite(mouseY, "y");
 }

 //if there are values in the previous locations
 //draw a line between them and the current positions
 else {
 line(previousMouseX, previousMouseY, mouseX, mouseY);
 previousMouseX = mouseX;
 previousMouseY = mouseY;

 //these are for the mirrored drawing the other side of the
 //line of symmetry
 var oX = this.calculateOpposite(mouseX, "x");
 var oY = this.calculateOpposite(mouseY, "y");
 line(previousOppositeMouseX, previousOppositeMouseY, oX, oY);
 previousOppositeMouseX = oX;
 previousOppositeMouseY = oY;
 }
 }
 //if the mouse isn't pressed reset the previous values to -1
 else {
 previousMouseX = -1;
 previousMouseY = -1;

 previousOppositeMouseX = -1;
 previousOppositeMouseY = -1;
 }

 //after the drawing is done save the pixel state. We don't want the
 //line of symmetry to be part of our drawing

 loadPixels();

 //push the drawing state so that we can set the stroke weight and color
 push();
 strokeWeight(3);
 stroke("red");
 //draw the line of symmetry
 if (this.axis == "x") {
 line(width / 2, 0, width / 2, height);
 } else {
 line(0, height / 2, width, height / 2);
 }
 //return to the original stroke
 pop();
 };

 /\*
 \* calculate an opposite coordinate the other side of the
 \* symmetry line.
 \* @param n number: location for either x or y coordinate
 \* @param a [x,y]: the axis of the coordinate (y or y)
 \* @return number: the opposite coordinate
 \*/
 this.calculateOpposite = function (n, a) {
 //if the axis isn't the one being mirrored return the same
 //value
 if (a != this.axis) {
 return n;
 }

 //if n is less than the line of symmetry return a coorindate
 //that is far greater than the line of symmetry by the distance from
 //n to that line.
 if (n < this.lineOfSymmetry) {
 return this.lineOfSymmetry + (this.lineOfSymmetry - n);
 }

 //otherwise a coordinate that is smaller than the line of symmetry
 //by the distance between it and n.
 else {
 return this.lineOfSymmetry - (n - this.lineOfSymmetry);
 }
 };

 //when the tool is deselected update the pixels to just show the drawing and
 //hide the line of symmetry. Also clear options
 this.unselectTool = function () {
 updatePixels();
 //clear options
 select(".options").html("");
 };

 //adds a button and click handler to the options area. When clicked
 //toggle the line of symmetry between horizonatl to vertical
 this.populateOptions = function () {
 select(".options").html(
 "Make Horizontal"
 );
 //click handler
 select("#directionButton").mouseClicked(function () {
 var button = select("#" + this.elt.id);
 if (self.axis == "x") {
 self.axis = "y";
 self.lineOfSymmetry = height / 2;
 button.html("Make Vertical");
 } else {
 self.axis = "x";
 self.lineOfSymmetry = width / 2;
 button.html("Make Horizontal");
 }
 });
 };
}
다음은 p5.js를 사용하는 미러 그리기 도구의 코드입니다. 
캔버스 대신 HTML 요소를 사용하여 반사선을 구현하려면 어떻게해야합니까?
함수 mirrorDrawTool() {
 this.name = "mirrorDraw";
 this.icon = "assets/mirrorDraw.jpg";

 //어떤 축을 미러링할지(x 또는 y) x가 기본값입니다.
 this.axis = "x";
 //대칭의 선은 화면의 중간에 있습니다.
 이 대칭선 = 너비 / 2;

 //이것은 jquery 클릭 핸들러에서 변경됩니다. 따라서 이를
 //변수 self로 저장하면 핸들러에서 계속 액세스할 수 있습니다.
 var self = this;

 //마지막으로 draw를 호출했을 때 마우스가 어디에 있었는지.
 //처음에는 -1로 설정합니다.
 var previousMouseX = -1;
 var previousMouseY = -1;

 //대칭선 반대편에 대한 마우스 좌표.
 var previousOppositeMouseX = -1;
 var previousOppositeMouseY = -1;

 this.draw = function () {
 //픽셀의 마지막 저장 상태를 표시합니다.
 updatePixels();

 //마우스를 눌렀을 때 그리기 수행
 if (mouseIsPressed) {
 //이전 값이 -1이면 현재 마우스 위치로 설정합니다.
 //그리고 미러링된 위치로 설정
 if (previousMouseX == -1) {
 previousMouseX = mouseX;
 previousMouseY = mouseY;
 previousOppositeMouseX = this.calculateOpposite(mouseX, "x");
 previousOppositeMouseY = this.calculateOpposite(mouseY, "y");
 }

 //이전 위치에 값이 있는 경우
 //그 값과 현재 위치 사이에 선을 그립니다.
 else {
 line(previousMouseX, previousMouseY, mouseX, mouseY);
 previousMouseX = mouseX;
 previousMouseY = mouseY;

 //이것들은 대칭선의 반대편에 있는
 //대칭 라인
 var oX = this.calculateOpposite(mouseX, "x");
 var oY = this.calculateOpposite(mouseY, "y");
 line(previousOppositeMouseX, previousOppositeMouseY, oX, oY);
 previousOppositeMouseX = oX;
 previousOppositeMouseY = oY;
 }
 }
 //마우스를 누르지 않으면 이전 값을 -1로 재설정합니다.
 else {
 previousMouseX = -1;
 previousMouseY = -1;

 previousOppositeMouseX = -1;
 previousOppositeMouseY = -1;
 }

 //그림이 완료된 후 픽셀 상태를 저장합니다. 우리는 대칭의
 //대칭 선이 드로잉의 일부가 되는 것을 원하지 않습니다.

 loadPixels();

 //획 무게와 색상을 설정할 수 있도록 드로잉 상태를 푸시합니다.
 push();
 strokeWeight(3);
 stroke("red");
 //대칭 선 그리기
 if (this.axis == "x") {
 선(너비/2, 0, 너비/2, 높이);
 } else {
 line(0, 높이 / 2, 너비, 높이 / 2);
 }
 //원래 스트로크로 돌아가기
 pop();
 };

 /\*
 \* 대칭 선의 반대편에 있는 반대 좌표를 계산합니다.
 \* 대칭 선의 반대 좌표를 계산합니다.
 \* @param n number: x 또는 y 좌표의 위치
 \* @param a [x,y]: 좌표의 축(x 또는 y)
 \* @리턴 번호: 반대 좌표
 \*/
 this.calculateOpposite = function (n, a) {
 //반대축이 미러링되는 축이 아닌 경우 동일한 값을 반환합니다.
 //값
 if (a != this.axis) {
 반환 n;
 }

 //n이 대칭선보다 작으면 좌표값을 반환합니다.
 //대칭선보다 훨씬 큰 값을 반환합니다.
 //대칭선보다 훨씬 큰 코린데이트를 반환합니다.
 if (n < this.lineOfSymmetry) {
 return this.lineOfSymmetry + (this.lineOfSymmetry - n);
 }

 //그렇지 않으면 대칭선보다 작은 좌표를 반환합니다.
 //대칭선보다 작은 좌표를 반환합니다.
 else {
 return this.lineOfSymmetry - (n - this.lineOfSymmetry);
 }
 };

 //툴이 선택 해제되면 픽셀을 업데이트하여 그림만 표시하고
 //대칭선을 숨깁니다. 또한 옵션을 지우세요.
 this.unselectTool = function () {
 updatePixels();
 //옵션 지우기
 select(".options").html("");
 };

 //옵션 영역에 버튼과 클릭 핸들러를 추가합니다. 클릭하면
 //가로 대칭선을 세로 대칭으로 전환합니다.
 this.populateOptions = function () {
 select(".options").html(
 "수평으로 만들기"
 );
 //클릭 핸들러
 select("#directionButton").mouseClicked(function () {
 var button = select("#" + this.elt.id);
 if (self.axis == "x") {
 self.axis = "y";
 self.lineOfSymmetry = 높이 / 2;
 button.html("세로로 만들기");
 } else {
 self.axis = "x";
 self.lineOfSymmetry = 너비 / 2;
 button.html("가로로 만들기");
 }
 });
 };
}