Hear from Slack, the ACLU, TED, & more at our customer summit in San Francisco Register
LOG IN SIGN UP
Documentation

Canvas

Features

Description

The canvas parameter increase the size of the canvas around an image.

API Pattern

Aspect Ratio Canvas

Parameter

Parameter Description
canvas increase the size of the canvas around an image.

Parameter Values

Value Units Description
width Pixels or Percentage The width of the canvas.
height Pixels or Percentage The height of the canvas.
x{value} Pixels or Percentage The x coordinate position on the canvas.
y{value} Pixels or Percentage The y coordinate position on the canvas.
offset-x{value} Percentage The horizontal offset position on the canvas.
offset-y{value} Percentage The vertical offset position on the canvas.

Notes

  1. The canvas values should always be equal to or greater than the specified image dimensions. When specifying an aspect ratio canvas, if no width or height are supplied the largest area of the requested aspect ratio will be returned based on the dimensions of the source image.
  2. The x and y or offset-x and offset-y parameters are optional.
  3. The x and y or offset-x and offset-y parameters can be supplied in any order after the width and height.
  4. If no x, y or offset-x,offset-y parameters are supplied the image is positioned in the center of the canvas.
  5. The x parameter can be supplied without y and vice versa.
  6. The offset-x parameter can be supplied without offset-y and vice versa.
  7. The background color of the canvas will default to transparency for image output formats that support transparency and white for formats that don't. This behaviour can be changed by adding the bg-color parameter.
  8. When using canvas and pad at the same time pad will be ignored.
  9. Pixel rounding is performed on all calculations in a decimal format (with as much accuracy as possible). The final value is then rounded down.

Examples

Description HTML Demo
Center Canvas - Set a canvas of 320px by 240px with no offset parameters. <img src="image.jpg?width=300&canvas=320,240"/> Example
Canvas & Offset - Set a canvas of 320px by 240px and offset the x-axis 25% and the y-axis 50% <img src="image.jpg?width=300&canvas=320,240,offset-x0.25,offset-y0.50"/> Example
Advanced Examples (Combining Additional Parameters)
Description HTML Additional Param Demo
Center canvas and set background color <img src="image.png?width=300&canvas=320,240&bg-color=000000"/> bg-color Example