GPURenderPassEncoder: draw() method

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Note: This feature is available in Web Workers.

The draw() method of the GPURenderPassEncoder interface draws primitives based on the vertex buffers provided by setVertexBuffer().

Syntax

js
draw(vertexCount)
draw(vertexCount, instanceCount)
draw(vertexCount, instanceCount, firstVertex)
draw(vertexCount, instanceCount, firstVertex, firstInstance)

Parameters

vertexCount

A number defining the number of vertices to draw.

instanceCount Optional

A number defining the number of instances to draw. If omitted, instanceCount defaults to 1.

firstVertex Optional

A number defining the offset into the vertex buffers, in vertices, to begin drawing from. If omitted, firstVertex defaults to 0.

firstInstance Optional

A number defining the first instance to draw. If omitted, firstInstance defaults to 0.

Return value

None (Undefined).

Examples

In our basic render demo, several commands are recorded via a GPUCommandEncoder. Most of these commands originate from the GPURenderPassEncoder created via GPUCommandEncoder.beginRenderPass(). draw() is used to specify that three vertices should be drawn to create our triangle.

js
// …

const renderPipeline = device.createRenderPipeline(pipelineDescriptor);

// Create GPUCommandEncoder to issue commands to the GPU
// Note: render pass descriptor, command encoder, etc. are destroyed after use, fresh one needed for each frame.
const commandEncoder = device.createCommandEncoder();

// Create GPURenderPassDescriptor to tell WebGPU which texture to draw into, then initiate render pass
const renderPassDescriptor = {
  colorAttachments: [
    {
      clearValue: clearColor,
      loadOp: "clear",
      storeOp: "store",
      view: context.getCurrentTexture().createView(),
    },
  ],
};

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// Draw the triangle
passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(3);

// End the render pass
passEncoder.end();

// End frame by passing array of command buffers to command queue for execution
device.queue.submit([commandEncoder.finish()]);

// …

Specifications

Specification
WebGPU
# dom-gpurendercommandsmixin-draw

Browser compatibility

desktop mobile server
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
draw
Chrome – Partial support
Chrome 113 (Release date: 2023-05-02)
footnote Partial support
footnote Supported on ChromeOS, macOS, and Windows.
footnote Supported on Linux (Intel Gen12+ GPUs only) since Chrome 144.
Edge – Partial support
Edge 113 (Release date: 2023-05-05)
footnote Partial support
footnote Supported on ChromeOS, macOS, and Windows.
footnote Supported on Linux (Intel Gen12+ GPUs only) since Edge 144.
Firefox – Partial support
Firefox 141 (Release date: 2025-07-22)
footnote Partial support
footnote Supports all contexts except service workers. See bug 1942431.
footnote Supports Windows since Firefox 141. See bug 1972486.
footnote Supports macOS Tahoe on Apple silicon since Firefox 145. See bug 1992212.
footnote Supports older macOS versions on Apple silicon since Firefox 147. See bug 1993341.
footnote Does not support macOS on Intel CPUs. See bug 2004105.
footnote Does not support Linux. See bug 2006676.
Opera – Partial support
Opera 99 (Release date: 2023-05-16)
footnote Partial support
footnote Supported on ChromeOS, macOS, and Windows.
footnote Supported on Linux (Intel Gen12+ GPUs only) since Opera 128.
Safari – Full support
Safari 26 (Release date: 2025-09-15)
footnote Full support
Chrome Android – Full support
Chrome Android 121 (Release date: 2024-01-23)
footnote Full support
Firefox for Android – No support
Firefox for Android
footnote No support
Opera Android – Full support
Opera Android 81 (Release date: 2024-03-14)
footnote Full support
Safari on iOS – Full support
Safari on iOS 26 (Release date: 2025-09-15)
footnote Full support
Samsung Internet – Full support
Samsung Internet 25 (Release date: 2024-04-24)
footnote Full support
WebView Android – Full support
WebView Android 121 (Release date: 2024-01-23)
footnote Full support
WebView on iOS – Full support
WebView on iOS 26 (Release date: 2025-09-15)
footnote Full support
Deno – No support
Deno 1.8 – 1.31 (Release date: 2021-03-02)
footnote Removed in 1.32 and later
Deno – No support
Deno 1.39 (Release date: 2023-12-14)
disabled
disabled From version 1.39 users must explicitly set the --unstable-webgpu runtime flag.

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
User must explicitly enable this feature.
Has more compatibility info.

See also