help ukraine

We stand with Ukraine! If you're as appalled by Russia's abhorrent attack as we are, please support Ukraine and its people.

Canvas

On this page

Add space around your image by adjusting the canvas size.

Demo

Width and height

'canvas.width' - sets the width of the canvas, in pixels or percentage (%). If you choose a value smaller than the width of the original image, the image will be cropped.

https://sirv.sirv.com/Examples/test-sky.jpg?canvas.width=112%

Example image with wide canvas

'canvas.height' - sets the height of the canvas, in pixels or percentage (%). If you choose a value smaller than the height of the original image, the image will be cropped. The image below has a 112% canvas width, so white is added to the left and right:

https://sirv.sirv.com/Examples/test-sky.jpg?canvas.width=112%&canvas.height=260

Example image with wide canvas and fixed height canvas

Color

'canvas.color' - sets the color of the background canvas. The values are set with hex RGB/RGBA or a color name. The default value is 'white'. Here's an example with dark orange (C16303):

https://sirv.sirv.com/Examples/test-sky.jpg?canvas.width=112%&canvas.height=260&canvas.color=C16303

Example image with colored canvas

Position

'canvas.position' - sets the position of the canvas behind the image. The values, other than the default 'center', correspond to points on a compass, with 'north' located in the top middle. The allowed values are: north, northeast, northwest, center, south, southeast, southwest, east, and west.

https://sirv.sirv.com/Examples/test-sky.jpg?canvas.width=112%&canvas.height=260&canvas.color=C16303&canvas.position=west

Example image with canvas aligned left

Opacity

'canvas.opacity' - is set on a scale from 0 (transparent) to 100 (opaque). The default value is '100'. JPEG doesn't support transparency, so the example below is served as PNG:

https://sirv.sirv.com/Examples/test-sky.jpg?canvas.width=112%&canvas.height=260&canvas.color=C16303&canvas.opacity=50&format=png

Example image with semi-transparent canvas as PNG

Border

The canvas border is great for setting a consistently sized border around an image. It can be used with or without the other canvas options.

'canvas.border.width' and 'canvas.border.height' are set in px or %:

https://sirv.sirv.com/Examples/test-sky.jpg?canvas.border.width=40

Example image with 40px border

To specify different widths and heights, use both options:

https://sirv.sirv.com/Examples/test-sky.jpg?canvas.border.width=10&canvas.border.height=40

Example image with different border dimensions

'canvas.border.color' sets a color as a hex ref:

https://sirv.sirv.com/Examples/test-sky.jpg?canvas.border.width=40&canvas.border.color=317bba

Example image with colored border

'canvas.border.opacity' adjusts the transparency - only applied to supporting images (not JPEG):

https://sirv.sirv.com/Examples/test-sky.jpg?canvas.border.width=40&canvas.border.color=317bba&canvas.border.opacity=30

Example image with colored border

Aspect ratio

'canvas.aspectratio' sets an aspect ratio to the canvas, which is useful for making a varied set of images have uniform dimensions. Common aspect ratios are 4:3, 16:9, 1:1, 3:2, 5:4. Each number can have any value from 1-99, as long as the difference is greater than 0.04 and smaller than 25.

https://sirv.sirv.com/Examples/test-sky.jpg?canvas.aspectratio=16:9&canvas.color=317bba

Example image with fixed canvas aspect ratio

Was this article helpful?

Related articles

Get help from a Sirv expert