I have 8 flex-box columns where when you hover over it, images will show. I want to leave trails as my mouse move across the screen, so I used onmousemove to draw lines onto a canvas. However, when I put my canvas on top of the columns, the hover on the columns to reveal the photos no longer work. How can I leave a mouse line trail while making the images appear when i hover on the columns? Thank you!
<div class="container">
<canvas id="c" width="100%" height="100%" ></canvas>
<div class="row">
<div class="col" id="col1" >
<img class="media-overlay col-1 left top" id="img1"
src="imgs/port2.jpg" alt="port2" />
</div>
<div class="col" id="col2">
<img class="media-overlay col-1 left bottom " id="img2"
src="imgs/port1.jpg" alt="port1" />
</div>
<div class="col" id="col3">
<img class="media-overlay col-2 right top"
src="imgs/land1.jpg" id="img3" alt="land1" />
</div>
</div>
<script> // this draws the line that follows the mouse movements
const pathes = []; // this is where we will store all our pathes
let mouse_down = false; // shall we draw ?
c.onmouseover = e => {
// add a new path object
pathes.push({
pts: [], // an array of points
dashed: check.checked // boolean
});
mouse_down = true; // we should draw
}
c.onmouseup = c.onmouseleave = e => mouse_down = false;
c.onmousemove = throttle(e => {
if (!mouse_down) {
return;
} else {
const rec = c.getBoundingClientRect();
// add a new point
addPoint(e.clientX - rec.left, e.clientY - rec.top);
redraw(); // redraw everything
}
});
function redraw() {
ctx.clearRect(0, 0, c.width, c.height); // we clear everything
// and draw every pathes
pathes.forEach(path => {
ctx.setLineDash(path.dashed ? [5, 5] : [0]);
// set line color
// ctx.strokeStyle = '#FFFFFF';
ctx.beginPath();
path.pts.forEach(pt => ctx.lineTo(pt.x, pt.y));
ctx.stroke();
})
}
function addPoint(x, y) {
// append to the last one
const points = pathes[pathes.length - 1].pts;
points.push({
x: x,
y: y
});
}
// just to avoid unnecessary drawings
function throttle(callback) {
if (typeof callback !== 'function')
throw 'A callback function must be passed';
var active = false;
var evt;
var handler = function() {
active = false;
callback(evt);
};
return function handleEvent(e) {
evt = e;
if (!active) {
active = true;
requestAnimationFrame(handler);
}
};
}
//css
body {
margin: 0;
padding: 0;
height:100%;
}
.row {
display: flex;
flex-direction: row;
height: 100vh;
width: 100vw;
}
.col {
height: 100%;
width: 300px;
position: relative;
flex-shrink: 0;
}
img.media-overlay {
position: absolute;
display:none;
}
.col:hover img {
display: block;
}
canvas {
display:block;
border: 1px solid;
position: absolute;
padding: 0;
margin:0;
z-index: 1;
}
Try to add all event listeners to #container element instead of canvas, I assume that canvas is same width and height.
When add pointer-events:none; to your canvas element. This property cancels all user events on current layer and passes them to elements below.
// ====================== drawing canvas
const ctx = c.getContext('2d');
const $container= document.querySelector('#container');
// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
c.width = window.innerWidth;
c.height = window.innerHeight;
/**
* Your drawings need to be inside this function otherwise they will be reset when
* you resize the browser window and the canvas goes will be cleared.
*/
drawStuff();
}
resizeCanvas();
function drawStuff() {
// do your drawing stuff here//
const pathes = []; // this is where we will store all our pathes
let mouse_down = false; // shall we draw ?
$container.onmouseover = e => {
// add a new path object
pathes.push({
pts: [], // an array of points
dashed: check.checked // boolean
});
mouse_down = true; // we should draw
}
$container.onmouseup = c.onmouseleave = e => mouse_down = false;
$container.onmousemove = throttle(e => {
if (!mouse_down) {
return;
} else {
const rec = c.getBoundingClientRect();
// add a new point
addPoint(e.clientX - rec.left, e.clientY - rec.top);
redraw(); // redraw everything
}
});
function redraw() {
ctx.clearRect(0, 0, c.width, c.height); // we clear everything
// and draw every pathes
pathes.forEach(path => {
ctx.setLineDash(path.dashed ? [5, 5] : [0]);
// set line color
// ctx.strokeStyle = '#FFFFFF';
ctx.beginPath();
path.pts.forEach(pt => ctx.lineTo(pt.x, pt.y));
ctx.stroke();
})
}
function addPoint(x, y) {
// append to the last one
const points = pathes[pathes.length - 1].pts;
points.push({
x: x,
y: y
});
}
// just to avoid unnecessary drawings
function throttle(callback) {
if (typeof callback !== 'function')
throw 'A callback function must be passed';
var active = false;
var evt;
var handler = function() {
active = false;
callback(evt);
};
return function handleEvent(e) {
evt = e;
if (!active) {
active = true;
requestAnimationFrame(handler);
}
};
}
}
//================ randomizing columns====================
let mediaElements = [...document.getElementsByClassName("col")];
// this is where u assign the array for the list of src (or randomise it)
//array.forEach(function(currentValue, index, arr), thisValue)
//put the range in an array
function range(start, end) {
var ans = [];
for (let i = start; i <= end; i++) {
ans.push(i);
}
return ans;
}
//shuffle the array
function shuffle(array) {
return array.sort(() => Math.random() - 0.5);
}
//now shuffle order
let orderNumber = range(1, mediaElements.length);
let shuffled = shuffle(orderNumber);
//console.log(shuffled); // [5, 3, 1, 2, 4]
//assign order somehow lmao
mediaElements.forEach(y => {
// this is where u add or the src
// y is each of the img
//console.log(y)
y.style.order = shuffled.shift()
});/* canvas {
border: 1px solid;
} */
/* CSS files add styling rules to your content */
html {
margin: 0px;
}
body {
margin: 0;
padding: 0;
margin-bottom: 0;
margin-top: 0;
/* background-color: black; */
height: 100%;
margin-top: 0%;
padding: 0%;
}
.row {
display: flex;
flex-direction: row;
height: 100vh;
width: 100vw;
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
margin-left: 0px;
margin: 0px;
}
.col {
height: 100%;
width: 300px;
position: relative;
border-right: 0.5px #EDE7DD solid;
border-top: 0.5px #EDE7DD solid;
border-bottom: 0.5px #EDE7DD solid;
flex-shrink: 0;
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
}
/* .col:hover {
background-color: pink;
} */
img.media-overlay {
position: absolute;
padding: 0;
margin: 0;
display: none;
border-bottom: 0.5px #EDE7DD solid;
border-top: 0.5px #EDE7DD solid;
}
.col:hover img {
display: block;
}
img.col-1 {
max-width: 300px;
}
img.col-2 {
max-width: 600.5px;
/* add border width 600 */
}
img.left {
left: 0;
}
img.right {
right: 0;
}
img.top {
top: 0;
border-top: 0px black solid;
}
img.bottom {
bottom: 0;
border-bottom: 0px black solid;
}
@media (max-width: 480px) {
/* ==============
row takes up the entire screen
need to take care of the images or media-overlays too
============== */
.col {
width: 100%;
}
/* ==============
columns turn into rows
need to take care of the images or media-overlays too
width of rows, and border (bottom)
============== */
/* .row {
flex-direction: column;
} */
}
h3 {
padding-left: 30px;
padding-right: 30px;
color: #EDE7DD;
/* color:#FFC6C0; */
font-family: nimbus-sans, sans-serif;
font-weight: 700;
font-style: normal;
}
p {
padding-left: 30px;
padding-right: 30px;
color: #EDE7DD;
font-family: nimbus-sans, sans-serif;
font-weight: 300;
font-style: normal;
}
.bottomText {
position: absolute;
bottom: 0;
z-index: -1;
}
canvas {
display: block;
border: 1px solid;
position: absolute;
padding: 0;
margin: 0;
z-index: 1;
pointer-events:none;
/* overflow: auto; */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello!</title>
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css" />
<!-- nimbus sans -->
<!-- bold -->
<link rel="stylesheet" href="https://use.typekit.net/oub0bcu.css" />
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
</head>
<body>
<label>
<input type="checkbox" id="check" checked style="display:none"/></label
><br />
<div class="container" id='container'>
<canvas id="c" width="100%" height="100%"></canvas>
<div class="row" id="row">
<div class="col" id="col1">
<h3>Abbie Lilley & Indiya Tupe</h3>
<p>
“Unearth is a campaign intending to inspire a deeper exploration and richer interactions with our surroundings
in order to apprehend a deeper embrace of natural and urban environments. Animating the lyrics of Nothing but
Flowers by Talking Heads, playful juxtapositions are at the heart of our environmental centred campaign;
investigating a place’s potential to transform typographic led interventions and inform visual language.”</p>
<img class="media-overlay col-1 left top" id="img1" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport2.jpg?v=1595172025095" alt="port2" />
</div>
<div class="col " id="col2">
<img class="media-overlay col-1 left bottom " id="img2" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport1.jpg?v=1595172012754" alt="port1" />
<div class= "bottomText">
<h3>Mayli Mountford</h3>
<p>
“An unconventional rebrand of 'Britishness' so it accurately represents contemporary ’British' Identity to
promote and represent all people and culture in the United Kingdom. An aspect I decided to rebrand was British
slang and language - there are typical British sayings but I knew there are other sayings from other cultures
that are spoken in the UK.
<br><br>People of different ethnicities have been born, grown up here, and consider themselves British and yet
the British identity does not represent them? Maybe Britain wouldn’t be so divided, if Britain actually
represented Britain?
</p>
</div>
</div>
<div class="col" id="col3">
<img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fland1.jpg?v=1595171993148" id="img3" alt="land1" />
<h3>3</h3>
<p></p>
</div>
<div class="col" id="col4">
<img class="media-overlay col-1 right bottom " src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport4.jpeg?v=1595172032309" id="img4" alt="port3" />
<h3>4</h3>
<p></p>
</div>
<div class="col" id="col5">
<img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fland2.png?v=1595172018931" id="img5" alt="land2" />
<h3>5</h3>
<p></p>
</div>
<div class="col" id="col6">
<img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fland2.png?v=1595172018931" id="img6" alt="land2" />
<h3>6</h3>
<p></p>
</div>
<div class="col" id="col7">
<img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport4.jpeg?v=1595172032309" id="img7" alt="land2" />
<h3>7</h3>
<p></p>
</div>
<div class="col" id="col8">
<img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport4.jpeg?v=1595172032309" id="img8" alt="land2" />
<h3>8</h3>
<p></p>
</div>
</div>
</div>
</body>
</html>