Call function twice with different parameters

Question

My Code works for 1 canvas. But I need this implementation to work for 2 of canvas.

So I tried

  var SIGNATURE_2 = new CLIPBOARD_CLASS("signatureCanvas2", true);

The problem is that this always pastes the image in the first canvas, I just need to press Ctrl+V. How do I paste ONLY when the canvas is focused or hovered?

////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // Copy paste Image to Canvas
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
    var SIGNATURE = new CLIPBOARD_CLASS("signatureCanvas", true);
    var SIGNATURE_2 = new CLIPBOARD_CLASS("signatureCanvas2", true);

    /**
     * image pasting into canvas
     * 
     * @param {string} canvas_id - canvas id
     * @param {boolean} autoresize - if canvas will be resized
     */
    function CLIPBOARD_CLASS(canvas_id, autoresize) {
        var _self = this;
        var canvas = document.getElementById(canvas_id);
        var ctx = document.getElementById(canvas_id).getContext("2d");
        var ctrl_pressed = false;
        var command_pressed = false;
        var paste_event_support;
        var pasteCatcher;

        //handlers
        document.addEventListener('keydown', function (e) {
            _self.on_keyboard_action(e);
        }, false); //firefox fix
        document.addEventListener('keyup', function (e) {
            _self.on_keyboardup_action(e);
        }, false); //firefox fix
        document.addEventListener('paste', function (e) {
            _self.paste_auto(e);
        }, false); //official paste handler

        //constructor - we ignore security checks here
        this.init = function () {
            pasteCatcher = document.createElement("div");
            pasteCatcher.setAttribute("id", "paste_ff");
            pasteCatcher.setAttribute("contenteditable", "");
            pasteCatcher.style.cssText = 'opacity:0;position:fixed;top:0px;left:0px;width:10px;margin-left:-20px;';
            document.body.appendChild(pasteCatcher);

            // create an observer instance
            var observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (paste_event_support === true || ctrl_pressed == false || mutation.type != 'childList'){
                        //we already got data in paste_auto()
                        return true;
                    }

                    //if paste handle failed - capture pasted object manually
                    if(mutation.addedNodes.length == 1) {
                        if (mutation.addedNodes[0].src != undefined) {
                            //image
                            _self.paste_createImage(mutation.addedNodes[0].src);
                        }
                        //register cleanup after some time.
                        setTimeout(function () {
                            pasteCatcher.innerHTML = '';
                        }, 20);
                    }
                });
            });
            var target = document.getElementById('paste_ff');
            var config = { attributes: true, childList: true, characterData: true };
            observer.observe(target, config);
        }();
        //default paste action
        this.paste_auto = function (e) {
            paste_event_support = false;
            if(pasteCatcher != undefined){
                pasteCatcher.innerHTML = '';
            }
            if (e.clipboardData) {
                var items = e.clipboardData.items;
                if (items) {
                    paste_event_support = true;
                    //access data directly
                    for (var i = 0; i < items.length; i++) {
                        if (items[i].type.indexOf("image") !== -1) {
                            //image
                            var blob = items[i].getAsFile();
                            var URLObj = window.URL || window.webkitURL;
                            var source = URLObj.createObjectURL(blob);
                            this.paste_createImage(source);
                        }
                    }
                    e.preventDefault();
                }
                else {
                    //wait for DOMSubtreeModified event              
                }
            }
        };
        //on keyboard press
        this.on_keyboard_action = function (event) {
            var k = event.keyCode;
            //ctrl
            if (k == 17 || event.metaKey || event.ctrlKey) {
                if (ctrl_pressed == false)
                    ctrl_pressed = true;
            }
            //v
            if (k == 86) {
                if (document.activeElement != undefined && document.activeElement.type == 'text') {
                    //let user paste into some input
                    return false;
                }

                if (ctrl_pressed == true && pasteCatcher != undefined){
                    pasteCatcher.focus();
                }
            }
        };
        //on kaybord release
        this.on_keyboardup_action = function (event) {
            //ctrl
            if (event.ctrlKey == false && ctrl_pressed == true) {
                ctrl_pressed = false;
            }
            //command
            else if(event.metaKey == false && command_pressed == true){
                command_pressed = false;
                ctrl_pressed = false;
            }
        };
        //draw pasted image to canvas
        this.paste_createImage = function (source) {
            var pastedImage = new Image();
            pastedImage.onload = function () {
                if(autoresize == true){
                    //resize
                    canvas.width = pastedImage.width;
                    canvas.height = pastedImage.height;
                }
                else{
                    //clear canvas
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                }
                ctx.drawImage(pastedImage, 0, 0);
            };
            pastedImage.src = source;
        };
    }

.signatureCanvas {
    border:1px solid #027C8C;
    width: 100%;
    max-height:200px;
}

<canvas id="signatureCanvas" class="signatureCanvas"></canvas>
 
  <canvas id="signatureCanvas2" class="signatureCanvas"></canvas>

PS: Please just open snipping tool on windows and copy paste an image to test

Answer 1

I might remove the handlers from the class wholesale and have one simple keyup event.

In this example the keyup handler is attached to the document element. When it's fired it calls handleKeyUp which checks to see what elements are being hovered over. The canvas will be the last element in the nodelist. Here the code grabs that and then paints/unpaints it red. Hover over the two canvases and then press a key and you'll see what I mean.

document.addEventListener('keyup', handleKeyUp, false);

function handleKeyUp(e) {
  const hovers = document.querySelectorAll(':hover');
  const canvas = hovers[hovers.length - 1];
  paint(canvas); // or call a class method to paste to your canvas etc
}

function paint(c) {
  const isActive = c.classList.contains('active');
  isActive ? c.classList.remove('active') : c.classList.add('active');
}

canvas {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

canvas.active {
  background-color: red;
}

<canvas id="signatureCanvas" class="active"></canvas>
<canvas id="signatureCanvas2"></canvas>

It seems a bit easier to do it this way.

Answer 2

You can add click event to select proper canvas:

    canvas_ids.forEach(function(canv) {
        document.getElementById(canv).addEventListener('click',     function (e) {
            canvas = document.getElementById(canv);
            ctx = document.getElementById(canv).getContext("2d");
        }, false);
    });

Then you have to change CLIPBOARD_CLASS creation.

var SIGNATURE= new CLIPBOARD_CLASS(["signatureCanvas","signatureCanvas2"], true);

To ensure that by default first canvas is selected you have to change:

var canvas = document.getElementById(canvas_ids[0]);
var ctx = document.getElementById(canvas_ids[0]).getContext("2d");

JSFiddle