I don’t want to see the circles and the color should be a little transparent. And if I draw again, it shouldn't be so transparent anymore.How can i do? Here is my code.
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>
Please help me find the solution. I searched on google but couldn't find a solution. I want use like highlighter. Thanks if you can help me.
https://jsfiddle.net/epmo9buy/
I could not reproduce anything other than the word "test", but if you have something transparent, you should use rgba for colors in place of hexadecimal or rgb. rgba (red, green, blue, alpha) is the same as rbg, but has and extra transparency part called the alpha. This goes from 0 to 1, 0 being invisible and 1 being a solid color. Using, say, 0.5 would have it be half transparency. Hope this helps.