Hands-On High Performance Programming with Qt 5

Canvas 2D

Canvas 2D is a JavaScript API modeled after the 2D context for HTML. A basic usage is shown in the following example:

Canvas {  id: triangle      property real triangleWidth: width * 0.8;  property real triangleHeight: height * 0.8  onPaint: {    var ctx = getContext("2d");    ctx.lineWidth = 4    ctx.strokeStyle = "blue"    ctx.beginPath();    ctx.moveTo(0, 0);    ctx.lineTo(triangleWidth, 0);    ...    ctx.stroke()  }}

As you see, we will do our painting in the onPaint event handler using JavaScript. This API is only useful for non-complex items, because, well, it's a JavaScript API, and thus, not very fast. It might, however, be useful for quick prototyping as you can pull in existing JavaScript visualization libraries.

There is also the Canvas 3D interface, ...