Dart: Fillstyle on Cavnas
To be able to draw on canvas in Dart you need two things. A canvas element defined and a canvas rendering context to draw on. In this example we use a CanvasRenderingContext2D to fillstyle a set of rectangles with rgb colors of size x and y. Modified for Dart, mozilla developer example can be done the following way. Check a live example here.
[sourcecode lang=”html”]
<html>
<head>
<title>CanvasFillstyleExample</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script type="text/javascript" src="CanvasFillstyleExample.dart.app.js"></script>
</body>
</html>
[/sourcecode]
[sourcecode lang=”java”]
draw() {
var ctx = document.query(‘canvas’).getContext(‘2d’);
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.fillStyle = ‘rgb(’ + (255-42.5*i).floor().toString() + ‘,’ +
(255-42.5*j).floor().toString() + ‘,0)’;
ctx.fillRect(j*25,i*25,25,25);
}
}
}
[/sourcecode]