CSC517 OffScreenCanvas Servo: Difference between revisions

From Expertiza_Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
'''About Off Screen Canvas:'''
'''About Off Screen Canvas:'''
The HTML specification defines a <canvas> element that can use a 2d or 3d rendering context. A new specification was recently developed that defines a canvas that can be used without being associated with an in-page canvas element, allowing for more efficient rendering.
 
The HTML specification defines a <canvas> element that can use a 2d or 3d rendering context. A new specification was recently developed that defines a canvas that can be used without being associated with an in-page canvas element, allowing for more efficient rendering. To use the OffscreenCanvas API, we have used a RenderingContext that has been obtained from an OffscreenCanvas object to generate new frames. Once a new frame has finished rendering in this context,  the transferToImageBitmap() method can be called to save the most recent rendered image. This method returns an ImageBitmap object, which can be used in a variety of Web APIs and also in a second canvas without creating a transfer copy.


'''Problem Statement:'''
'''Problem Statement:'''


The following tasks were accomplished in the project:


<pre>
1) Creating the OffscreenCanvas and OffscreenCanvasRenderingContext2d interfaces with stub method implementations.
typedef (OffscreenCanvasRenderingContext2D or WebGLRenderingContext or WebGL2RenderingContext) OffscreenRenderingContext;
 
dictionary ImageEncodeOptions {
  DOMString type = "image/png";
  unrestricted double quality = 1.0;
};
 
enum OffscreenRenderingContextId { "2d", "webgl", "webgl2" };
 
[Constructor([EnforceRange] unsigned long long width, [EnforceRange] unsigned long long height), Exposed=(Window,Worker), Transferable]
[Pref="dom.offscreen_canvas.enabled"]
interface OffscreenCanvas : EventTarget {
  attribute [EnforceRange] unsigned long long width;
  attribute [EnforceRange] unsigned long long height;


  OffscreenRenderingContext? getContext(OffscreenRenderingContextId contextId, optional any options = null);
2) Implementing the OffscreenCanvas Constructor [https://html.spec.whatwg.org/multipage/scripting.html#dom-offscreencanvas] that creates a new canvas.
  ImageBitmap transferToImageBitmap();
  //Promise<Blob> convertToBlob(optional ImageEncodeOptions options);
};
</pre>


<pre>
3) The OffscreenCanvas Constructor has essentially 2 properties: OffscreenCanvas.width and OffscreenCanvas.height, which represents the width and height of the canvas respectively.
[Exposed=(Window,Worker)]
[Pref="dom.offscreen_canvas.enabled"]
interface OffscreenCanvasRenderingContext2D {
  void commit();
  readonly attribute OffscreenCanvas canvas;
};


OffscreenCanvasRenderingContext2D includes CanvasState;
4) The constructor also has the method OffscreenCanvas.getContext().
OffscreenCanvasRenderingContext2D includes CanvasTransform;
OffscreenCanvasRenderingContext2D includes CanvasCompositing;
OffscreenCanvasRenderingContext2D includes CanvasImageSmoothing;
OffscreenCanvasRenderingContext2D includes CanvasFillStrokeStyles;
OffscreenCanvasRenderingContext2D includes CanvasShadowStyles;
OffscreenCanvasRenderingContext2D includes CanvasFilters;
OffscreenCanvasRenderingContext2D includes CanvasRect;
OffscreenCanvasRenderingContext2D includes CanvasDrawPath;
OffscreenCanvasRenderingContext2D includes CanvasText;
OffscreenCanvasRenderingContext2D includes CanvasDrawImage;
OffscreenCanvasRenderingContext2D includes CanvasImageData;
OffscreenCanvasRenderingContext2D includes CanvasPathDrawingStyles;
OffscreenCanvasRenderingContext2D includes CanvasTextDrawingStyles;
OffscreenCanvasRenderingContext2D includes CanvasPath;
</pre>

Revision as of 02:58, 3 November 2018

About Off Screen Canvas:

The HTML specification defines a <canvas> element that can use a 2d or 3d rendering context. A new specification was recently developed that defines a canvas that can be used without being associated with an in-page canvas element, allowing for more efficient rendering. To use the OffscreenCanvas API, we have used a RenderingContext that has been obtained from an OffscreenCanvas object to generate new frames. Once a new frame has finished rendering in this context, the transferToImageBitmap() method can be called to save the most recent rendered image. This method returns an ImageBitmap object, which can be used in a variety of Web APIs and also in a second canvas without creating a transfer copy.

Problem Statement:

The following tasks were accomplished in the project:

1) Creating the OffscreenCanvas and OffscreenCanvasRenderingContext2d interfaces with stub method implementations.

2) Implementing the OffscreenCanvas Constructor [1] that creates a new canvas.

3) The OffscreenCanvas Constructor has essentially 2 properties: OffscreenCanvas.width and OffscreenCanvas.height, which represents the width and height of the canvas respectively.

4) The constructor also has the method OffscreenCanvas.getContext().

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvas_Servo&oldid=118503"