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.