support resizing canvas seperately.

src/Web/Avalonia.Web.Blazor/Interop/SKHtmlCanvasInterop.cs

@@ -11,6 +11,7 @@ namespace Avalonia.Web.Blazor.Interop
         private const string InitRasterSymbol = "SKHtmlCanvas.initRaster";
         private const string DeinitSymbol = "SKHtmlCanvas.deinit";
         private const string RequestAnimationFrameSymbol = "SKHtmlCanvas.requestAnimationFrame";
+        private const string SetCanvasSizeSymbol = "SKHtmlCanvas.setCanvasSize";
         private const string PutImageDataSymbol = "SKHtmlCanvas.putImageData";
 
         private readonly ElementReference htmlCanvas;
@@ -68,8 +69,11 @@ namespace Avalonia.Web.Blazor.Interop
             callbackReference?.Dispose();
         }
 
-        public void RequestAnimationFrame(bool enableRenderLoop, int rawWidth, int rawHeight) =>
+        public void RequestAnimationFrame(bool enableRenderLoop) =>
-            Invoke(RequestAnimationFrameSymbol, htmlCanvas, enableRenderLoop, rawWidth, rawHeight);
+            Invoke(RequestAnimationFrameSymbol, htmlCanvas, enableRenderLoop);
+
+        public void SetCanvasSize(int rawWidth, int rawHeight) =>
+            Invoke(SetCanvasSizeSymbol, htmlCanvas, rawWidth, rawHeight);
 
         public void PutImageData(IntPtr intPtr, SKSizeI rawSize) =>
             Invoke(PutImageDataSymbol, htmlCanvas, intPtr.ToInt64(), rawSize.Width, rawSize.Height);

src/Web/Avalonia.Web.Blazor/Interop/Typescript/SKHtmlCanvas.ts

@@ -25,6 +25,8 @@ export class SKHtmlCanvas {
 	renderFrameCallback: DotNet.DotNetObjectReference;
 	renderLoopEnabled: boolean = false;
 	renderLoopRequest: number = 0;
+    newWidth: number;
+    newHeight: number;
 
 	public static initGL(element: HTMLCanvasElement, elementId: string, callback: DotNet.DotNetObjectReference): SKGLViewInfo {
 		var view = SKHtmlCanvas.init(true, element, elementId, callback);
@@ -75,13 +77,22 @@ export class SKHtmlCanvas {
 		htmlCanvas.SKHtmlCanvas = undefined;
 	}
 
-	public static requestAnimationFrame(element: HTMLCanvasElement, renderLoop?: boolean, width?: number, height?: number) {
+	public static requestAnimationFrame(element: HTMLCanvasElement, renderLoop?: boolean) {
 		const htmlCanvas = element as SKHtmlCanvasElement;
 		if (!htmlCanvas || !htmlCanvas.SKHtmlCanvas)
 			return;
 
-		htmlCanvas.SKHtmlCanvas.requestAnimationFrame(renderLoop, width, height);
+		htmlCanvas.SKHtmlCanvas.requestAnimationFrame(renderLoop);
 	}
+    
+    public static setCanvasSize(element: HTMLCanvasElement, width: number, height: number)
+    {
+        const htmlCanvas = element as SKHtmlCanvasElement;
+        if (!htmlCanvas || !htmlCanvas.SKHtmlCanvas)
+            return;
+        
+        htmlCanvas.SKHtmlCanvas.setCanvasSize(width, height);
+    }
 
 	public static setEnableRenderLoop(element: HTMLCanvasElement, enable: boolean) {
 		const htmlCanvas = element as SKHtmlCanvasElement;
@@ -128,28 +139,34 @@ export class SKHtmlCanvas {
 	public deinit() {
 		this.setEnableRenderLoop(false);
 	}
-
+    
-	public requestAnimationFrame(renderLoop?: boolean, width?: number, height?: number) {
+    public setCanvasSize(width: number, height: number)
+    {
+        this.newWidth = width;
+        this.newHeight = height;
+    }
+
+	public requestAnimationFrame(renderLoop?: boolean) {
 		// optionally update the render loop
 		if (renderLoop !== undefined && this.renderLoopEnabled !== renderLoop)
 			this.setEnableRenderLoop(renderLoop);
 
-		// make sure the canvas is scaled correctly for the drawing
-		if (width && height) {
-			this.htmlCanvas.width = width;
-			this.htmlCanvas.height = height;
-		}
-
 		// skip because we have a render loop
 		if (this.renderLoopRequest !== 0)
 			return;
 
 		// add the draw to the next frame
 		this.renderLoopRequest = window.requestAnimationFrame(() => {
-			if (this.glInfo) {
+            if (this.glInfo) {
-				// make current
+                // make current
-				GL.makeContextCurrent(this.glInfo.context);
+                GL.makeContextCurrent(this.glInfo.context);
-			}
+            }
+            
+            if(this.htmlCanvas.width != this.newWidth || this.htmlCanvas.height != this.newHeight)
+            {
+                this.htmlCanvas.width = this.newWidth;
+                this.htmlCanvas.height = this.newHeight;
+            }
 
 			this.renderFrameCallback.invokeMethod('Invoke');
 			this.renderLoopRequest = 0;