How Multiple Canvas - Same Interaction - html

Question

I'm trying to use this interaction but on 3 canvas in a row. I've been trying to play around with it for some time and failed to add multiple canvas that use the same interaction without interfering with one another.
I thought of uniquely call them canvas1, canvas2 and canvas3, but I'm wondering if anyone knew a simpler way?
I made a rough hide/show jquery version of what I have in mind but instead, it would use that scratching interaction.
Thank you!
$(".image1").click(function(){
$(".image1").hide();
$("p").show();
});
$(".image2").click(function(){
$(".image2").hide();
$("p").show();
});
$(".image3").click(function(){
$(".image3").hide();
$("p").show();
});
.pannel{
width: calc(33% - 40px);
height: 220px;
float: left;
margin: 0 20px;
}
.image1, .image2, .image3{
max-width:100px !important;
background-size: contain;
background-repeat: no-repeat;
background-position: bottom;
position:absolute;
}
.text-div{
width: 80%;
text-align: center;
margin:auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row pannels">
<div class="col-lg-12">
<div class="pannels-div">
<div class="pannel ">
<div class="image1"><img src="https://www.patrickmorin.com/media/catalog/product/cache/e4d64343b1bc593f1c5348fe05efa4a6/a/s/asphalt-shingle-lifetime-1-BAREVGL-fr.jpg" width="220"></div>
<div class="text-div">
<p> Vestibulum tempor erat at mauris aliquet, eu laoreet mi imperdiet.</p>
</div>
</div>
<div class="pannel">
<div class="image2"><img src="https://www.patrickmorin.com/media/catalog/product/cache/e4d64343b1bc593f1c5348fe05efa4a6/a/s/asphalt-shingle-lifetime-1-BAREVGL-fr.jpg" width="220"></div>
<div class="text-div">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim risus et orci fringilla semper.</p>
</div>
</div>
<div class="pannel">
<div class="image3"><img src="https://www.patrickmorin.com/media/catalog/product/cache/e4d64343b1bc593f1c5348fe05efa4a6/a/s/asphalt-shingle-lifetime-1-BAREVGL-fr.jpg" width="220"></div>
<div class="text-div">
<p>Praesent eget congue sem, tempor fermentum augue. Duis vulputate, libero vitae efficitur convallis.</p>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Okay so I've worked it out by adding a number on each class and each canvas's. It would be nice to know if there's an optimal way to use the same drawing effect but for multiple canvas.
The code is a mess, but I guess it works now
(function () {
'use strict';
/* 1er */
var isDrawing1, lastPoint1;
var container1 = document.getElementById('js-container1');
var canvas1 = document.getElementById('js-canvas1');
var canvas1Width = canvas1.width;
var canvas1Height = canvas1.height;
var ctx1 = canvas1.getContext('2d');
var image1 = new Image();
var brush1 = new Image();
/* 2e */
var isDrawing2, lastPoint2;
var container2 = document.getElementById('js-container2');
var canvas2 = document.getElementById('js-canvas2');
var canvas2Width = canvas2.width;
var canvas2Height = canvas2.height;
var ctx2 = canvas2.getContext('2d');
var image2 = new Image();
var brush2 = new Image();
/* 3e */
var isDrawing3, lastPoint3;
var container3 = document.getElementById('js-container3');
var canvas3 = document.getElementById('js-canvas3');
var canvas3Width = canvas3.width;
var canvas3Height = canvas3.height;
var ctx3 = canvas3.getContext('2d');
var image3 = new Image();
var brush3 = new Image();
/* Load top images */
image1.src = 'http://placehold.it/324x289/145f46?text=Canva1';
image2.src = 'http://placehold.it/324x289/145f46?text=Canva2';
image3.src = 'http://placehold.it/324x289/145f46?text=Canva3';
draw1();
draw2();
draw3();
function draw1() {
// image du dessus
image1.onload = function () {
ctx1.drawImage(image1, 0, 0);
// Show the scratchText when Image is loaded.
document.querySelectorAll('.scratchText1')[0].style.visibility = 'visible';
};
//image du brush a scratch
brush1.src = 'https://icon-library.com/images/3-dots-icon/3-dots-icon-9.jpg';
//Mouvement de la souris
canvas1.addEventListener('mousedown', handleMouseDown, false);
canvas1.addEventListener('touchstart', handleMouseDown, false);
canvas1.addEventListener('mousemove', handleMouseMove, false);
canvas1.addEventListener('touchmove', handleMouseMove, false);
canvas1.addEventListener('mouseup', handleMouseUp, false);
canvas1.addEventListener('touchend', handleMouseUp, false);
function distanceBetween(point1, point2) {
return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
}
function angleBetween(point1, point2) {
return Math.atan2(point2.x - point1.x, point2.y - point1.y);
}
function getMouse(e, canvas1) {
var offsetX = 0,
offsetY = 0,
mx, my;
if (canvas1.offsetParent !== undefined) {
do {
offsetX += canvas1.offsetLeft;
offsetY += canvas1.offsetTop;
} while ((canvas1 = canvas1.offsetParent));
}
mx = (e.pageX || e.touches[0].clientX) - offsetX;
my = (e.pageY || e.touches[0].clientY) - offsetY;
return {
x: mx,
y: my
};
}
function handleMouseDown(e) {
isDrawing1 = true;
lastPoint1 = getMouse(e, canvas1);
}
function handleMouseMove(e) {
if (!isDrawing1) {
return;
}
e.preventDefault();
var currentPoint = getMouse(e, canvas1),
dist = distanceBetween(lastPoint1, currentPoint),
angle = angleBetween(lastPoint1, currentPoint),
x, y;
for (var i = 0; i < dist; i++) {
x = lastPoint1.x + (Math.sin(angle) * i) - 25;
y = lastPoint1.y + (Math.cos(angle) * i) - 25;
ctx1.globalCompositeOperation = 'destination-out';
ctx1.drawImage(brush1, x, y);
}
lastPoint1 = currentPoint;
}
function handleMouseUp(e) {
isDrawing1 = false;
}
}
/* 2e */
function draw2() {
// image du dessus
image2.onload = function () {
ctx2.drawImage(image2, 0, 0);
// Show the scratchText when Image is loaded.
document.querySelectorAll('.scratchText2')[0].style.visibility = 'visible';
};
//image du brush a scratch
brush2.src = 'https://icon-library.com/images/3-dots-icon/3-dots-icon-9.jpg';
//Mouvement de la souris
canvas2.addEventListener('mousedown', handleMouseDown, false);
canvas2.addEventListener('touchstart', handleMouseDown, false);
canvas2.addEventListener('mousemove', handleMouseMove, false);
canvas2.addEventListener('touchmove', handleMouseMove, false);
canvas2.addEventListener('mouseup', handleMouseUp, false);
canvas2.addEventListener('touchend', handleMouseUp, false);
function distanceBetween(point1, point2) {
return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
}
function angleBetween(point1, point2) {
return Math.atan2(point2.x - point1.x, point2.y - point1.y);
}
function getMouse(e, canvas2) {
var offsetX = 0,
offsetY = 0,
mx, my;
if (canvas2.offsetParent !== undefined) {
do {
offsetX += canvas2.offsetLeft;
offsetY += canvas2.offsetTop;
} while ((canvas2 = canvas2.offsetParent));
}
mx = (e.pageX || e.touches[0].clientX) - offsetX;
my = (e.pageY || e.touches[0].clientY) - offsetY;
return {
x: mx,
y: my
};
}
function handleMouseDown(e) {
isDrawing2 = true;
lastPoint2 = getMouse(e, canvas2);
}
function handleMouseMove(e) {
if (!isDrawing2) {
return;
}
e.preventDefault();
var currentPoint = getMouse(e, canvas2),
dist = distanceBetween(lastPoint2, currentPoint),
angle = angleBetween(lastPoint2, currentPoint),
x, y;
for (var i = 0; i < dist; i++) {
x = lastPoint2.x + (Math.sin(angle) * i) - 25;
y = lastPoint2.y + (Math.cos(angle) * i) - 25;
ctx2.globalCompositeOperation = 'destination-out';
ctx2.drawImage(brush2, x, y);
}
lastPoint2 = currentPoint;
}
function handleMouseUp(e) {
isDrawing2 = false;
}
}
/* 3e */
function draw3() {
// image du dessus
image3.onload = function () {
ctx3.drawImage(image3, 0, 0);
// Show the scratchText when Image is loaded.
document.querySelectorAll('.scratchText3')[0].style.visibility = 'visible';
};
//image du brush a scratch
brush3.src = 'https://icon-library.com/images/3-dots-icon/3-dots-icon-9.jpg';
//Mouvement de la souris
canvas3.addEventListener('mousedown', handleMouseDown, false);
canvas3.addEventListener('touchstart', handleMouseDown, false);
canvas3.addEventListener('mousemove', handleMouseMove, false);
canvas3.addEventListener('touchmove', handleMouseMove, false);
canvas3.addEventListener('mouseup', handleMouseUp, false);
canvas3.addEventListener('touchend', handleMouseUp, false);
function distanceBetween(point1, point2) {
return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
}
function angleBetween(point1, point2) {
return Math.atan2(point2.x - point1.x, point2.y - point1.y);
}
function getMouse(e, canvas3) {
var offsetX = 0,
offsetY = 0,
mx, my;
if (canvas3.offsetParent !== undefined) {
do {
offsetX += canvas3.offsetLeft;
offsetY += canvas3.offsetTop;
} while ((canvas3 = canvas3.offsetParent));
}
mx = (e.pageX || e.touches[0].clientX) - offsetX;
my = (e.pageY || e.touches[0].clientY) - offsetY;
return {
x: mx,
y: my
};
}
function handleMouseDown(e) {
isDrawing3 = true;
lastPoint3 = getMouse(e, canvas3);
}
function handleMouseMove(e) {
if (!isDrawing3) {
return;
}
e.preventDefault();
var currentPoint = getMouse(e, canvas3),
dist = distanceBetween(lastPoint3, currentPoint),
angle = angleBetween(lastPoint3, currentPoint),
x, y;
for (var i = 0; i < dist; i++) {
x = lastPoint3.x + (Math.sin(angle) * i) - 25;
y = lastPoint3.y + (Math.cos(angle) * i) - 25;
ctx3.globalCompositeOperation = 'destination-out';
ctx3.drawImage(brush3, x, y);
}
lastPoint3 = currentPoint;
}
function handleMouseUp(e) {
isDrawing3 = false;
}
}
})();
body {
padding: 20px 0;
}
.container1, .container2, .container3 {
border: 3px solid yellow;
position: relative;
width: 324px;
height: 289px;
margin: 0 auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.canvas1 {
position: absolute;
top: 0;
}
.canvas2 {
position: absolute;
top: 0;
}
.canvas3 {
position: absolute;
top: 0;
}
.scratchText1 {
padding: 20px;
}
.scratchText2 {
padding: 20px;
}
.scratchText3 {
padding: 20px;
}
<div class="container">
<div class="container1">
<div id="js-container1">
<canvas class="canvas1" id="js-canvas1" width="324" height="289"></canvas>
<div class="scratchText1" style="visibility: hidden;">
<h2>'Allo, 'Allo!</h2>
<h3>The secret code is:</h3>
<h1><code>HlkafSYc</code></h1>
</div>
</div>
</div>
<div class="container2">
<div id="js-container2">
<canvas class="canvas2" id="js-canvas2" width="324" height="289"></canvas>
<div class="scratchText2" style="visibility: hidden;">
<h2>'Allo, 'Allo!</h2>
<h3>The secret code is:</h3>
<h1><code>HlkafSYc</code></h1>
</div>
</div>
</div>
<div class="container3">
<div id="js-container3">
<canvas class="canvas3" id="js-canvas3" width="324" height="289"></canvas>
<div class="scratchText3" style="visibility: hidden;">
<h2>'Allo, 'Allo!</h2>
<h3>The secret code is:</h3>
<h1><code>HlkafSYc</code></h1>
</div>
</div>
</div>
</div>