# Module: ol/render

This documentation is for OpenLayers v10.9.0. The latest is v.

## ol/render

    import * as olRender from 'ol/render';

### Functions

#### getRenderPixel(event, pixel){Pixel}

render.js, line 147

      import {getRenderPixel} from 'ol/render';

  Gets the pixel of the event's canvas context from the map viewport's CSS pixel.

  Name | Type | Description
  --- | --- | ---
  `event` | RenderEvent | Render event.
  `pixel` | Pixel | CSS pixel relative to the top-left corner of the map viewport.

  ##### Returns:

  Pixel on the event's canvas context.

#### getVectorContext(event){CanvasImmediateRenderer}

render.js, line 101

      import {getVectorContext} from 'ol/render';

  Gets a vector context for drawing to the event's canvas.

  Name | Type | Description
  --- | --- | ---
  `event` | RenderEvent | Render event.

  ##### Returns:

  Vector context.

#### toContext(context, options){CanvasImmediateRenderer}

render.js, line 71

      import {toContext} from 'ol/render';

  Binds a Canvas Immediate API to a canvas context, to allow drawing geometries to the context's canvas.

  The units for geometry coordinates are css pixels relative to the top left corner of the canvas element.

      import {toContext} from 'ol/render.js';
      import Fill from 'ol/style/Fill.js';
      import Polygon from 'ol/geom/Polygon.js';

      const canvas = document.createElement('canvas');
      const render = toContext(
          canvas.getContext('2d'),
          {size: [100, 100]}
      );
      render.setFillStrokeStyle(new Fill({ color: blue }));
      render.drawPolygon(
          new Polygon([[[0, 0], [100, 100], [100, 0], [0, 0]]])
      );

  Name | Type | Description
  --- | --- | ---
  `context` | CanvasRenderingContext2D | Canvas context.
  `options` | Options.
  Name | Type | Description
  --- | --- | ---
  `size` | Size | undefined | Desired size of the canvas in css pixels. When provided, both canvas and css size will be set according to the `pixelRatio`. If not provided, the current canvas and css sizes will not be altered.
  `pixelRatio` | number (defaults to window.devicePixelRatio) | Pixel ratio (canvas pixel to css pixel ratio) for the canvas.

  ##### Returns:

  Canvas Immediate.

### Type Definitions

#### OrderFunction()

render.js, line 26

  A function to be used when sorting features before rendering. It takes two instances of `Feature` or `RenderFeature` and returns a `{number}`.

#### State{Object}

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `context` | CanvasRenderingContext2D | Canvas context that the layer is being rendered to.
  `feature` | FeatureLike | Feature.
  `geometry` | SimpleGeometry | Geometry.
  `pixelRatio` | number | Pixel ratio used by the layer renderer.
  `resolution` | number | Resolution that the render batch was created and optimized for. This is not the view's resolution that is being rendered.
  `rotation` | number | Rotation of the rendered layer in radians.

#### ToContextOptions{Object}

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `size` | Size | undefined | Desired size of the canvas in css pixels. When provided, both canvas and css size will be set according to the `pixelRatio`. If not provided, the current canvas and css sizes will not be altered.
  `pixelRatio` | number (defaults to window.devicePixelRatio) | Pixel ratio (canvas pixel to css pixel ratio) for the canvas.