how to affect hover elements behind canvas when drawing mouse trail

Question

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

Accepted Answer

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 canvasconst 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 arrayfunction range(start, end) { var ans = []; for (let i = start; i <= end; i++) { ans.push(i); } return ans;}//shuffle the arrayfunction shuffle(array) { return array.sort(() => Math.random() - 0.5);}//now shuffle orderlet orderNumber = range(1, mediaElements.length);let shuffled = shuffle(orderNumber);//console.log(shuffled); // [5, 3, 1, 2, 4]//assign order somehow lmaomediaElements.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; */} Hello!

Abbie Lilley & Indiya Tupe

“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.”

Mayli Mountford

“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.

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?

3

4

Advertisement

Answer