toCanvas
API reference for the "toCanvas" method.
Converts any of the following inputs into an HTMLCanvasElement:
The resulting HTMLCanvasElement has its style.width and style.height attributes set to "100%". This ensures that, by default, the element matches the width and height of the iframe that it's contained within.

Usage

1
const { imageHelpers } = window.canva;
2
const canva = window.canva.init();
3
4
canva.onReady(async (opts) => {
5
const canvas = await imageHelpers.toCanvas(opts.element, {
6
quality: "preview",
7
});
8
console.log(canvas);
9
});
Copied!

Parameters

Name
Type
Required
Description
input
CanvaImageBlob
Yes
The CanvaImageBlob to convert into an HTMLCanvasElement.
opts
object
No
Options for configuring the HTMLCanvasElement.
opts.quality
ImageQuality
No
The quality of the HTMLCanvasElement. This parameter is only used when the input is aCanvaElement or CanvaMedia. The default value is ImageQuality.FULL.
opts.height
number
No
The height of the HTMLCanvasElement, in pixels.
opts.width
number
No
The width of the HTMLCanvasElement, in pixels.

Returns

Promise<HTMLCanvasElement>

Types

ImageQuality

Signature
1
const enum ImageQuality = {
2
FULL = "full",
3
PREVIEW = "preview",
4
THUMBNAIL = "thumbnail"
5
}
Copied!
Properties
Name
Value
FULL
"full"
PREVIEW
"preview"
THUMBNAIL
"thumbnail"
Last modified 1mo ago