I'm trying to clear one line by drawing another one on top of it on HTML canvas. But the second line becomes semi transparent for some unknown to me reason.
index.html
<!DOCTYPE html>
<head>
<script src="scripts.js" type="text/javascript"></script>
</head>
<html>
<body onload = "onload()">
<canvas id = "canvas" style="border: solid 1px; width: 200px; height: 200px;"></canvas>
</body>
</html>
scripts.js
var canvas,ctx;
const onload = () =>{
canvas = document.querySelector("#canvas")
ctx = canvas.getContext('2d')
drawLine("#ff0000")
drawLine("#ffffff")
}
const drawLine = (color) =>{
ctx.beginPath()
ctx.strokeStyle = color
ctx.moveTo(0,0)
ctx.lineTo(200,200)
ctx.stroke()
ctx.closePath()
}
var canvas,ctx;
const onload = () =>{
canvas = document.querySelector("#canvas")
ctx = canvas.getContext('2d')
drawLine("#ff0000")
drawLine("#ffffff")
}
const drawLine = (color) =>{
ctx.beginPath()
ctx.strokeStyle = color
ctx.moveTo(0,0)
ctx.lineTo(200,200)
ctx.stroke()
ctx.closePath()
}<!DOCTYPE html>
<head>
<script src="scripts.js" type="text/javascript"></script>
</head>
<html>
<body onload = "onload()">
<canvas id = "canvas" style="border: solid 1px; width: 200px; height: 200px;"></canvas>
</body>
</html>