marker.js 2 Documentation: Rendering options

Rendering options

By default marker.js 2 renders the resulting markup on top of the target image in PNG format of the same size you see while editing. However, there are a lot of things you can change this behavior.

Controlling rendering

You can control rendering results by setting one or more of the following properties:

  • renderAtNaturalSize - when set to true the resulting image will be rendered at the natural (original) target image size irrespectively of the screen size of the image object. Default: false.
  • renderImageType - you can control the resulting image format via this property. By default, it is set to image/png which is optimal for the best quality of the annotations. However, with photo-realistic target images, this could result in large(r) image files. In these cases, you may want to switch to image/jpeg and adjust renderImageQuality for the optimal size/quality.
  • renderImageQuality - when renderImageType is set to a renderer that supports quality settings, such as image/jpeg, you can set this property to adjust it. For JPEG the value of 0 means the lowest quality and smallest file size, 1 is for the highest quality and the largest file.
  • renderMarkersOnly - in cases, when you want to optionally overlay the annotations on top of the original image and switch annotations on and off, you may want to save annotations as a separate transparent image. Set renderMarkersOnly to true and don't forget to use an image format that supports transparency, such as image/png.


The following code instructs marker.js to render the result as an original size JPEG with 50% quality.

markerArea.renderAtNaturalSize = true; markerArea.renderImageType = 'image/jpeg'; markerArea.renderImageQuality = 0.5;

And here's how you render just the annotation layer.

// PNG is the default but it's always good to set it explicitly so that intent is clear. markerArea.renderImageType = 'image/png'; markerArea.renderMarkersOnly = true;