Canvas, WebGL and images

Integration

Canvas2D and WebGL use KUI graphics and scripting interfaces. Check available contexts, methods and limits individually; browser API names do not establish equivalent behavior. Verify SVG, bitmap, font and animation resources with the actual SDK package.

Constraints and troubleshooting

Keep graphics updates in the document frame lifecycle. Check drawing bounds and input coordinates after resizing and expose resource-load failures. Measure both first use and continuous updates. A still screenshot does not establish playback frame rate.

Canvas 2D in the running SDK

The SDK Canvas scene includes rectangles, paths, curves, gradients, strokes and text. This image was captured after KUI loaded the original HTML and Lua scene.

Get a 2D context

The page needs a canvas with id=c1. Lua obtains its context through getContext("2d"). Colors use property assignments and drawing operations use colon-method calls. This code comes from the SDK scene.

local c1 = document:getElementById("c1")
local ctx1 = c1:getContext("2d")
ctx1.fillStyle = "#e74c3c"
ctx1:fillRect(10, 10, 60, 40)
ctx1.strokeStyle = "#f1c40f"
ctx1.lineWidth = 3
ctx1:strokeRect(150, 10, 40, 100)

• Canvas methods →
• Canvas examples →

WebGL and the 3D extension

WebGL contexts and kui_ext_3d are separate integration surfaces. WebGL exposes shaders, buffers and drawing state; the standalone 3D extension adds scenes, assets and physics. Context availability depends on runtime configuration and the GPU environment.

• WebGL APIs →
• Standalone 3D extension →

SVG, bitmap and animation assets

Images, SVG, Lottie and CSS animation have distinct resource and update paths. Include required files and check scaling, clipping, transparency and frame activity after playback stops. Loading a format does not establish browser equivalence for every feature.

• SVG APIs →
• Lottie APIs →
• Animation APIs →

Check dimensions and coordinates before drawing

Verify a minimal scenario in this order before integrating the full application.

1. Draw a known shape at fixed dimensions to establish visibility.
2. Separate CSS display size from drawing-buffer size and recheck when scale changes.
3. Request frames only while needed and stop ongoing work when hidden or exiting.
4. Investigate shader compilation, resource loading and layout as separate failure classes.