Docs
v4
API Docs

Rendering

The SDK is the “back end” of the editor. It handles image rendering and image modification. If you’re interested in building your own UI, or not using a UI at all, this is the way to go.

Rendering using the SDK requires an input image as well as a canvas HTML element that it should render to. Let’s create the canvas element first:

<canvas id="canvas" />

Now let’s create an Image, load it, instantiate the SDK and render the image to the canvas:

window.onload = function () {
  const canvas = document.getElementById('canvas')
  const image = new Image()
  image.addEventListener('load', () => {
    const sdk = new PhotoEditorSDK('webgl', {
      canvas: canvas,
      image: image
    })
    sdk.render()
  })
  image.src = 'image.png'
}

The canvas should now display your image.