Get started with zrender CDN

BSD-3-Clause licensed

Zrender: Lightweight, flexible 2D WebGL rendering library.

Tags:
  • canvas
  • 2d
  • draw
  • echarts

Stable version

Copied!

How to start using zrender CDN


// Include ZRender library from CDN
const ZR = window.ZR || zrender.init(document.createElement('canvas'));

// Create a new renderer instance
const renderer = new ZR.WebGLRenderer({
  canvas: document.getElementById('mainCanvas'), // Replace with your canvas ID
  width: 200,
  height: 200
});

// Create a new group node
const group = new ZR.Group();

// Create a new circle shape
const circle = new ZR.Circle({
  shape: {
    r: 50, // Radius
    cx: 100, // Center x
    cy: 100 // Center y
  },
  style: {
    fill: 'red' // Fill color
  }
});

// Add the circle to the group
group.add(circle);

// Add the group to the scene
renderer.add(group);

// Render the scene
renderer.render();
Copied!
Copied!
Copied!
Copied!

All versions