Canvas

Dart lacks something like Raphaël.js[19] that eases some of the pain associated with working with the <canvas> element. Even so, it brings its own Darty take on the staple of HTML5 games everywhere.

As with traditional canvas, Dart still requires a <canvas> element and a corresponding drawing context. If the page already has a <canvas> element, we obtain a drawing context with the getContext method.

 
CanvasElement canvas = document.query(​'canvas'​);
 
CanvasRenderingContext2D context = canvas.getContext(​'2d'​);

Given the context, we can draw all sorts of wonderful things. For example, we can draw an empty, white rectangle on the entire canvas as a backdrop.

 
int width = context.canvas.width, height = context.canvas.height;
 
// start ...

Get Dart 1 for Everyone now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.