|
0
|
1 |
var ctx = document.getElementById('tutorial').getContext('2d');
|
|
|
2 |
|
|
|
3 |
// Draw background
|
|
|
4 |
ctx.fillStyle = 'rgb(255,221,0)';
|
|
|
5 |
ctx.fillRect(0,0,150,37.5);
|
|
|
6 |
ctx.fillStyle = 'rgb(102,204,0)';
|
|
|
7 |
ctx.fillRect(0,37.5,150,37.5);
|
|
|
8 |
ctx.fillStyle = 'rgb(0,153,255)';
|
|
|
9 |
ctx.fillRect(0,75,150,37.5);
|
|
|
10 |
ctx.fillStyle = 'rgb(255,51,0)';
|
|
|
11 |
ctx.fillRect(0,112.5,150,37.5);
|
|
|
12 |
|
|
|
13 |
// Draw semi transparent rectangles
|
|
|
14 |
for (i=0;i<10;i++){
|
|
|
15 |
ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
|
|
|
16 |
for (j=0;j<4;j++){
|
|
|
17 |
ctx.fillRect(5+i*14,5+j*37.5,14,27.5)
|
|
|
18 |
}
|
|
|
19 |
}
|