如何将canvas应用程序的这个功能javascript更改为面向对象的？

Question

我是编程的新手，现在正在开发一个关于使用html 5 canvas构建绘画应用程序的项目。

我想在我当前的绘画应用程序中添加一些函数：

1. 文字插入功能，如this one：

   示例代码如下：

   var canvas = document.getElementById('myCanvas'),
   ctx = canvas.getContext('2d'),
   font = '14px sans-serif',
   hasInput = false;
   
   canvas.onclick = function(e) {
   if (hasInput) return;
   addInput(e.clientX, e.clientY);
   }
   
   function addInput(x, y) {
   
   var input = document.createElement('input');
   
   input.type = 'text';
   input.style.position = 'fixed';
   input.style.left = (x - 4) + 'px';
   input.style.top = (y - 4) + 'px';
   
   input.onkeydown = handleEnter;
   
   document.body.appendChild(input);
   
   input.focus();
   
   hasInput = true;
   } 
   

1. 图像过滤功能，如this one：

   示例代码如下：

   <canvas id="canvas"></canvas>
   <script>
   var photo  = new Image();
   var canvas = document.getElementById('canvas');
   var ctx    = canvas.getContext('2d');
   
   function render () {
   // Scale so that the image fills the container
   var width  = window.innerWidth;
   var scale  = width / photo.naturalWidth;
   var height = photo.naturalHeight * scale;;
   
   canvas.width  = width;
   canvas.height = height;
   ctx.drawImage(photo, 0, 0);}
   
   </script>
   

尽管如此，我的伙伴创建的主要html和其他JS文件都使用面向对象的JavaScript语法，我不知道如何将这些功能JS与它们合并。

示例代码如下：

class AddText extends PaintFunction {
constructor(contextReal, contextDraft) {
super();
this.contextReal = contextReal;
this.contextDraft = contextDraft;

以下是我要求的建议：

1. 使用面向对象的JS＆amp; amp;的逻辑是什么？功能JS？
2. 如何更改这两种JS之间的语法？
3. 当我想使用构造函数/ this的语法时，逻辑/思维过程是什么？我通常会混淆如何在html＆amp;中调用该类。使用common.js文件中共享的函数。

非常感谢!!!