Canvas Playground

55

Live samples across 2D, WebGL, WebGPU, Three.js and Pixi.js.

FilterAll2DWebGLWebGPUThree.jsPixi.js

2D15

WebGL10

WebGPU10

Three.js10

Pixi.js10

hello-world.js— Hello World

1

2

3

4

5

6

7

8

9

10

ctx.setTransform(dpr,0,0,dpr,0,0); const w = canvas.width / dpr, h = canvas.height / dpr; const g = ctx.createLinearGradient(0,0,w,h); g.addColorStop(0,'#0ea5e9'); g.addColorStop(1,'#a855f7'); ctx.fillStyle = g; ctx.fillRect(0,0,w,h); ctx.fillStyle = 'white'; ctx.font = 'bold 48px system-ui, -apple-system, Segoe UI, Roboto'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('Hello, Canvas', w/2, h/2);

Export to NativeScript

Drop these files into a NativeScript Angular project with @nativescript/canvas and @nativescript/canvas-polyfill installed, then wire them into your page route. The file registers the Canvas element itself; see the header comments for any extra packages this sample needs.

Component template

Use this Angular template alongside the component class in the same routed page.