Drawing image on to TBitmap canvas does not work

I am trying to transfer the frame contents of the TWebMediaPlayer to a TBitmap so I can maninpulate the pixel data. Drawing onto the Canvas of the TBitmap does not seem to work. However, doing the same on to a TWebPaintBox seems to work. Any Thoughts?
FAviBitmap: TBitmap;
VectorOverlay: TWebPaintBox;
FAviBitmap.Canvas.Context.drawImage(MediaPlayer1.Element, 0, 0, FAviBitmap.Width, FAviBitmap.Height); <-- Does not work
VectorOverlay.Canvas.StretchDraw(PtsR, FAviBitmap); <-- Does not work

VectorOverlay.Canvas.Context.drawImage(MediaPlayer1.Element, 0, 0, VectorOverlay.Width, VectorOverlay.Height); <-- Works

In a browser, a graphics context needs to be created on a HTML CANVAS element which TBitmap is not using.
I suggest you create a TCanvas directly, do the painting on the canvas and then transfer to a bitmap with TBitmap.LoadFromCanvas()

I tried the LoadFromCanvas, it does not seem to work either. Using the TBitmap as interim storage does not seem to work. Something like below.
PBOverlayLeft: TWebPaintBox.
w = this.MediaPlayer1.FElement.videoWidth;
h = this.MediaPlayer1.FElement.videoHeight;

c := TCanvas.Create;
c.Context.canvas.width := w;
c.Context.canvas.height := h;

FBitmap.Width  := w;
FBitmap.Height := h;

c.Context.drawImage(MediaPlayer1.Element, 0,0, w, h);
PBOverlayLeft.Canvas.StretchDraw(PtsR, FBitmap); <-- Image not updated / No errors
Tried also:
FAviBitmap.Canvas.Context.putImageData(c.Context.getImageData( 0, 0, w, h), 0, 0); <-- does not work

PBOverlayLeft.Canvas.Context.putImageData(c.Context.getImageData( 0, 0, w, h), 0, 0); <-- Image is painted on canvas.

I am really stumped.

LoadFromCanvas() is internally asynchronous (due to the way the browser handles assigning images). So, do further processing from the bitmap.OnChanged event.
Example project
Project1.zip (5.4 KB)


It turned out that there is a bug in the StretchDraw procedure for the TCanvas. Did not have to use LoadFromCanvas. It worked as I originally coded after fixing the StretchDraw. I changed to match the Draw procedure which worked. See below for changes.

procedure TCanvas.StretchDraw(Rect: TCanvasRectF; Graphic: TGraphic);
  img: TJSObject;
  if Assigned(FContext) then
    img := Graphic.Image;
    if Assigned(img) then
      if Graphic.FUsedCanvas then
        FContext.drawImage(TJSObject(Graphic.FCanvasElement), 0, 0, Graphic.width, Graphic.height, Rect.Left, Rect.Top, Rect.Right - Rect.Left, Rect.Bottom - Rect.Top)
        FContext.drawImage(img, 0, 0, Graphic.width, Graphic.height, Rect.Left, Rect.Top, Rect.Right - Rect.Left, Rect.Bottom - Rect.Top);


Good catch!
we'll adapt this accordingly and this will be included in the next update