Draw Image on Canvas in Dart

12:06 AM



I was looking for display image within canvas via dart. The problem is that the most trivial solution crossed my mind was :

CanvasElement context = query("#canvasImage");
CanvasRenderingContext2D ctx = context.context2D;

ImageElement image = new ImageElement(src: "myImage.jpg");

ctx.drawImage(image, x, y);

But the problem that it is simply not working. So i came up with the following full functional solution :)

import 'dart:html';

CanvasElement context = query("#canvasImage");
CanvasRenderingContext2D ctx = context.context2D;

ImageElement image = new ImageElement(src: "myImage.jpg");

void main() {
drawImage();
}

void drawImage(){

var x = context.width / 2;
var y = context.height /2;

image.onLoad.listen(onData, onError: onError, onDone: onDone, cancelOnError: true);

}

onData(Event e) {
print("success: ");
ctx.drawImage(image, 0, 0);
}

onError(Event e) {
print("error: $e");
}

onDone() {
print("done");
}

Examples working for M5 dart version!

You Might Also Like

0 comments.

Popular Posts

Total Pageviews