He hecho un canvas con Fabric JS . Cargué una image en lienzo con Fabric Js . Ahora, quiero hacer un dibujo usando el objeto ctx . Puedo dibujar con éxito en el lienzo, pero cada vez que dejo el mouse, todo el dibujo desaparece.

Aquí está el código:

 let el = document.getElementById('canvas'); let ctx = el.getContext('2d'); // canvas variable is Fabric JS canvas. function simpleDraw() { let isDrawing; canvas.on('mouse:down', function (o) { let p1 = canvas.getPointer(oe); isDrawing = true; ctx.lineWidth = 10; ctx.lineJoin = ctx.lineCap = 'round'; ctx.moveTo(p1.x, p1.y); }); canvas.on('mouse:move', function (o) { let p2 = canvas.getPointer(oe); if (isDrawing) { ctx.lineTo(p2.x, p2.y); ctx.stroke(); } }); canvas.on('mouse:up', function (o) { isDrawing = false; canvas.requestRenderAll(); });

}

Tengo que drawing solo con ctx, porque tengo que hacer algunas cosas de animación. No puedo usar Fabric JS freeDrawingBrush .

Aquí hay un enlace de video problemático