Блог

Я сделал canvas с Fabric JS помощью . Я загрузил image на холст с Fabric Js помощью . Теперь я хочу сделать некоторые рисунки с использованием ctx object. Я могу успешно рисовать на холсте, но когда я когда-либо оставляю мышь, все рисунки исчезают.

Вот код:

 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(o.e);
        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(o.e);
      if (isDrawing) {
          ctx.lineTo(p2.x, p2.y);
          ctx.stroke();
      }
   });

  canvas.on('mouse:up', function (o) {
      isDrawing = false;
      canvas.requestRenderAll();
  });
 

}

Я должен иметь дело drawing только с ctx, потому что мне нужно сделать некоторые анимационные вещи. Я не могу использовать Fabric JS freeDrawingBrush .

Вот ссылка на проблемное видео