Is it possible to draw/enrich on the kendo-pdfviewer in Angular.

[Angelo]

Kendo UI is  it possible to draw  directly on the kendo-pdfviewer from the angular component library.
Things II have tried:
-embedding it in a drawing component to draw over - the problem here being  that the kendo-pdfviewer is removed from  the  page completely to make way  for the  canvas
-I tried to super impose the canvas over the kendo-pdfviewer with a relative off set of -y in CSS - The problem here was that although it worked for the most part the canvas then blocked the  PDF controls such as scrolling (especially if set to the same size).
-I tried to hook the canvas in the PDF to draw - here I just did not see any success. It seemed like  either I was drawn over or it simply was not used. Not the canvas is height="2376" x width="1836"
Here is some rough code for the last option I tired:

public pdfLoad(pdfViewerLoadEvent: PDFViewerLoadEvent)
  {
    this.pdfViewerContext = pdfViewerLoadEvent.context;
    this.pdfViewerContext.pdfDoc.getPage(1).then(async (page)=>{
      var scale = this.pdfViewerContext.zoom;
      var viewport = page.getViewport({scale});
      var canvas: HTMLCanvasElement  = document.getElementById('the-canvas') as HTMLCanvasElement;
      var context = canvas.getContext('2d')!;

      canvas.width = Math.floor(viewport.width * scale);
      canvas.height = Math.floor(viewport.height * scale);
      canvas.style.width = Math.floor(viewport.width) + "px";
      canvas.style.height =  Math.floor(viewport.height) + "px";

      context.beginPath();
      context.arc(300, 300, 100, 0, 2);
      context.stroke();

      var transform: number[] | undefined = scale !== 1
         ? [scale, 0, 0, scale, 0, 0]
         : undefined;
      var transform: number[] | undefined = [2,0,0]

      await page.render({
          canvasContext: context!,
          transform: transform,
          viewport: viewport
      });

      context.beginPath();
      context.arc(300, 300, 100, 0, 2);
      context.stroke();
    });
  }

[Martin Bechev]

Hi Angelo,

Thanks for sharing your experience. 

By default, the PDFViewer doesn't provide a built-in option to draw custom elements over it. Could I ask what is the desired end goal, and how the PDF should look like? Understanding the big picture will help us to understand better the case, and be able to provide the most suitable suggestions. Thank you in advance.

Regards,
Martin
Progress Telerik

[Mark]

I can't speak for Angelo but one valuable use case would be to be able to markup a pdf. I am currently attempting the same by using the canvas of the pdf viewer but can't get it to recognize the mousedown or click event.

Adding another canvas over the top makes it tricky to scale/relocate as the user zooms in and out.

[Mark]

I'm using kendo UI for Jquery however... not angular.

[Martin Bechev]

Hi Mark,

Thank you for the provided feedback.

Please check out the Kendo jQuery forum and open a new thread to get more detailed assistance about this case.

https://www.telerik.com/forums/kendo-ui

Regards