No quiero ver los círculos y el color debe ser un poco transparente. Y si vuelvo a dibujar, ya no debería ser tan transparente. ¿Cómo puedo hacerlo? Aquí está mi código.
window.addEventListener('load', ()=>{ resize(); document.addEventListener('mousedown', startPainting); document.addEventListener('mouseup', stopPainting); document.addEventListener('mousemove', sketch); window.addEventListener('resize', resize); }); const canvas = document.querySelector('#canvas'); const ctx = canvas.getContext('2d'); function resize(){ ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; } let coord = {x:0 , y:0}; let paint = false; function getPosition(event){ coord.x = event.clientX - canvas.offsetLeft; coord.y = event.clientY - canvas.offsetTop; } function startPainting(event){ paint = true; getPosition(event); } function stopPainting(){ paint = false; } function sketch(event){ if (!paint) return; ctx.beginPath(); ctx.lineWidth = 100; ctx.lineCap = 'round'; ctx.globalAlpha = 0.5; ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)'; ctx.moveTo(coord.x, coord.y); getPosition(event); ctx.lineTo(coord.x , coord.y); ctx.stroke(); } .content { position: relative; } .something { position: absolute; } #canvas { position: absolute; user-select: none; } <body> <div class="content"> <div class="something"> test </div> <canvas id="canvas"></canvas> </div> </body>Por favor, ayúdame a encontrar la solución. Busqué en google pero no pude encontrar una solución. Quiero usar como resaltador. Gracias si me pueden ayudar.
https://jsfiddle.net/epmo9buy/No pude reproducir nada más que la palabra "prueba", pero si tiene algo transparente, debe usar rgba para los colores en lugar de hexadecimal o rgb . rgba (red, green, blue, alpha) es lo mismo que rbg , pero tiene una parte de transparencia adicional llamada alpha . Esto va de 0 a 1, siendo 0 invisible y 1 siendo un color sólido. Usando, digamos, 0.5 tendría la mitad de transparencia. Espero que esto ayude.