Estoy tratando de borrar una línea dibujando otra encima en el lienzo HTML. Pero la segunda línea se vuelve semitransparente por alguna razón desconocida para mí.
índice.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>