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

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

Answer 2

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.