Sign in Join
Wiki copytemporary

BGRABitmap tutorial 14: what changed

Revision 2 to 3. Removed lines have a minus sign; added lines have a plus sign.

OldNewLine
1-[[BGRABitmap tutorial|**Home**]] | [[BGRABitmap tutorial 1|**Tutorial 1**]] | [[BGRABitmap tutorial 2|**Tutorial 2**]] | [[BGRABitmap tutorial 3|**Tutorial 3**]] | [[BGRABitmap tutorial 4|**Tutorial 4**]] | [[BGRABitmap tutorial 5|**Tutorial 5**]] | [[BGRABitmap tutorial 6|**Tutorial 6**]] | [[BGRABitmap tutorial 7|**Tutorial 7**]] | [[BGRABitmap tutorial 8|**Tutorial 8**]] | [[BGRABitmap tutorial 9|**Tutorial 9**]] | [[BGRABitmap tutorial 10|**Tutorial 10**]] | [[BGRABitmap tutorial 11|**Tutorial 11**]] | [[BGRABitmap tutorial 12|**Tutorial 12**]] | [[BGRABitmap tutorial 13|**Tutorial 13**]] | **Tutorial 14** | [[BGRABitmap tutorial 15|**Tutorial 15**]] | [[BGRABitmap tutorial 16|**Tutorial 16**]] | [[/wiki.freepascal.org/index.php?title=Template:BGRABitmap tutorial index&action=edit|Edit]]
1+This tutorial shows how to use the Canvas2D property of BGRABitmap. Canvas2D is designed to work like the Javascript 2D context of the HTML Canvas object.
22
3-This tutorial shows how to use the Canvas2D property of BGRABitmap. Canvas2D is designed to work like the Javascript 2D context of the HTML Canvas object.
3+## First program
44
5-## Contents
5+Here is a very simple example:
66
7- * 1 First program
8- * 2 Complex shapes
9- * 3 Using transformations
10- * 4 Gradients and memory usage
11- * 5 More examples
7+``` pascal
8+procedure TForm1.FormPaint(Sender: TObject);
9+var bmp: TBGRABitmap;
10+ ctx: TBGRACanvas2D;
11+begin
12+ bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,BGRA(210,210,210));
1213
13-## First program
14+ ctx := bmp.Canvas2D;
15+ ctx.fillStyle('rgb(240,128,0)');
16+ ctx.fillRect(30,30,80,60);
17+ ctx.strokeRect(50,50,80,60);
1418
15-Here is a very simple example:
16-```
17-procedure TForm1.FormPaint(Sender: TObject);
18- var bmp: TBGRABitmap;
19- ctx: TBGRACanvas2D;
20- begin
21- bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,BGRA(210,210,210));
22-
23- ctx := bmp.Canvas2D;
24- ctx.fillStyle('rgb(240,128,0)');
25- ctx.fillRect(30,30,80,60);
26- ctx.strokeRect(50,50,80,60);
27-
28- bmp.Draw(Canvas,0,0);
29- bmp.Free;
30- end;
19+ bmp.Draw(Canvas,0,0);
20+ bmp.Free;
21+end;
3122```
3223
33-Note that path fonctions are defined in the [[BGRABitmap Geometry types|IBGRAPath interface]]. The **TBGRAPath** class of unit BGRAPath[[1]](<https://github.com/bgrabitmap/bgrabitmap/blob/master/bgrabitmap/bgrapath.pas>) provides an independent path object that you can use to create shapes. A sample project can be found in [[BGRABitmap AggPas]]> "BGRABitmap AggPas").
34----
35-
36-The bitmap has a Canvas2D property which provides the fillRect and strokeRect function. The fillStyle is defined to orange by specifying a css color string. When the shape is filled, it uses the fill style, and when the border is drawn, it uses the stroke style.
24+Note that path fonctions are defined in the [[BGRABitmap Geometry types|IBGRAPath interface]]. The TBGRAPath class of unit BGRAPath[1](https://github.com/bgrabitmap/bgrabitmap/blob/master/bgrabitmap/bgrapath.pas) provides an independent path object that you can use to create shapes. A sample project can be found in [[BGRABitmap AggPas]].
3725
38-The code above is equivalent to this Javascript code:
39-```
40-var canvas = document.getElementsByTagName("canvas")[0];
41- canvas.width = 200
42- canvas.height = 200
43- if (canvas.getContext){
44- var ctx = canvas.getContext("2d");
45- ctx.fillStyle = "rgb(240,128,0)";
46- ctx.fillRect(30,30,80,60);
47- ctx.strokeRect(50,50,80,60);
48- }
26+The bitmap has a Canvas2D property which provides the fillRect and strokeRect function. The fillStyle is defined to orange by specifying a css color string. When the shape is filled, it uses the fill style, and when the border is drawn, it uses the stroke style.
27+
28+The code above is equivalent to this Javascript code:
29+
30+``` javascript
31+ var canvas = document.getElementsByTagName("canvas")[0];
32+ canvas.width = 200
33+ canvas.height = 200
34+ if (canvas.getContext){
35+ var ctx = canvas.getContext("2d");
36+ ctx.fillStyle = "rgb(240,128,0)";
37+ ctx.fillRect(30,30,80,60);
38+ ctx.strokeRect(50,50,80,60);
39+ }
4940```
5041
51-[![BGRATutorial14a.png](/wiki-images/5/5d/BGRATutorial14a.png)](</File:BGRATutorial14a.png>)
42+![](/wiki-images/5/5d/BGRATutorial14a.png)
5243
5344## Complex shapes
5445
55-To draw a complex shape, it is necessary to define a path:
56-```
57-procedure pave();
58- begin
59- ctx.fillStyle ('rgb(130,100,255)');
60- ctx.strokeStyle ('rgb(0,0,255)');
61- ctx.beginPath();
62- ctx.lineWidth:=2;
63- ctx.moveTo(5,5);ctx.lineTo(20,10);ctx.lineTo(55,5);ctx.lineTo(45,18);ctx.lineTo(30,50);
64- ctx.closePath();
65- ctx.stroke();
66- ctx.fill();
67- end;
68-
69- begin
70- bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,BGRA(210,210,210));
71- ctx := bmp.Canvas2D;
72- pave();
73- bmp.Draw(Canvas,0,0);
74- bmp.Free;
75- end;
46+To draw a complex shape, it is necessary to define a path:
47+
48+``` pascal
49+ procedure pave();
50+ begin
51+ ctx.fillStyle ('rgb(130,100,255)');
52+ ctx.strokeStyle ('rgb(0,0,255)');
53+ ctx.beginPath();
54+ ctx.lineWidth:=2;
55+ ctx.moveTo(5,5);ctx.lineTo(20,10);ctx.lineTo(55,5);ctx.lineTo(45,18);ctx.lineTo(30,50);
56+ ctx.closePath();
57+ ctx.stroke();
58+ ctx.fill();
59+ end;
60+
61+begin
62+ bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,BGRA(210,210,210));
63+ ctx := bmp.Canvas2D;
64+ pave();
65+ bmp.Draw(Canvas,0,0);
66+ bmp.Free;
67+end;
7668```
7769
78-Notice that the line width is defined by the property lineWidth and that the path begins with a beginPath call. If you want more information on the way path works, see the [Javascript documentation](<https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes>).
70+Notice that the line width is defined by the property lineWidth and that the path begins with a beginPath call. If you want more information on the way path works, see the [Javascript documentation](https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes).
7971
80-[![Tutorial14b.png](/wiki-images/a/a4/Tutorial14b.png)](</File:Tutorial14b.png>)
72+![](/wiki-images/a/a4/Tutorial14b.png)
8173
8274## Using transformations
8375
84-Now we can draw the triangle six times with a rotation by calling transformation functions.
85-```
86-procedure six();
87- var
88- i: Integer;
89- begin
90- ctx.save();
91- for i := 0 to 5 do
92- begin
93- ctx.rotate(2*PI/6);
94- pave();
95- end;
96- ctx.restore();
97- end;
98- begin
99- bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,BGRA(210,210,210));
100- ctx := bmp.Canvas2D;
101- ctx.translate(80,80);
102- six;
103- bmp.Draw(Canvas,0,0);
104- bmp.Free;
105- end;
76+Now we can draw the triangle six times with a rotation by calling transformation functions.
77+
78+``` pascal
79+ procedure six();
80+ var
81+ i: Integer;
82+ begin
83+ ctx.save();
84+ for i := 0 to 5 do
85+ begin
86+ ctx.rotate(2*PI/6);
87+ pave();
88+ end;
89+ ctx.restore();
90+ end;
91+begin
92+ bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,BGRA(210,210,210));
93+ ctx := bmp.Canvas2D;
94+ ctx.translate(80,80);
95+ six;
96+ bmp.Draw(Canvas,0,0);
97+ bmp.Free;
98+end;
10699```
107100
108-[![BGRATutorial14c.png](/wiki-images/9/91/BGRATutorial14c.png)](</File:BGRATutorial14c.png>)
101+![](/wiki-images/9/91/BGRATutorial14c.png)
109102
110103## Gradients and memory usage
111104
112-To use gradients, Canvas2D provides the createLinearGradient and createPattern functions. Theses functions return an interfaced object. You must not free them explicitely. They are freed when there are no more references to them. For example:
113-```
105+To use gradients, Canvas2D provides the createLinearGradient and createPattern functions. Theses functions return an interfaced object. You must not free them explicitely. They are freed when there are no more references to them. For example:
106+
107+``` pascal
114108var
115- grad: IBGRACanvasGradient2D;
116- begin
117- grad := ctx.createLinearGradient(0,0,320,240);
118- grad.addColorStop(0.3, '#ff0000');
119- grad.addColorStop(0.6, '#0000ff');
120- ctx.fillStyle(grad);
121-
122- grad := ctx.createLinearGradient(0,0,320,240);
123- grad.addColorStop(0.3, '#ffffff');
124- grad.addColorStop(0.6, '#000000');
125- ctx.strokeStyle(grad);
126- ctx.lineWidth := 5;
127-
128- ctx.moveto(160,120);
129- ctx.arc(160,120,100,Pi/6,-Pi/6,false);
130- ctx.fill();
131- ctx.stroke();
132- end;
109+ grad: IBGRACanvasGradient2D;
110+begin
111+ grad := ctx.createLinearGradient(0,0,320,240);
112+ grad.addColorStop(0.3, '#ff0000');
113+ grad.addColorStop(0.6, '#0000ff');
114+ ctx.fillStyle(grad);
115+
116+ grad := ctx.createLinearGradient(0,0,320,240);
117+ grad.addColorStop(0.3, '#ffffff');
118+ grad.addColorStop(0.6, '#000000');
119+ ctx.strokeStyle(grad);
120+ ctx.lineWidth := 5;
121+
122+ ctx.moveto(160,120);
123+ ctx.arc(160,120,100,Pi/6,-Pi/6,false);
124+ ctx.fill();
125+ ctx.stroke();
126+end;
133127```
134128
135-The grad variable is assigned with the gradient objects, but there is no call to Free.
129+The grad variable is assigned with the gradient objects, but there is no call to Free.
136130
137-[![BGRATutorial14d.png](/wiki-images/9/96/BGRATutorial14d.png)](</File:BGRATutorial14d.png>)
131+![](/wiki-images/9/96/BGRATutorial14d.png)
138132
139133## More examples
140134
141-Other examples are in the testcanvas2d directory of BGRABitmap archive. Scripts are taken from the [Jean-Paul Davalan web site](<https://web.archive.org/web/20190207062328/http://jean-paul.davalan.pagesperso-orange.fr/lang/jsc/js09.html>) (Internet Archive link) which contains HTML Canvas examples.
135+Other examples are in the testcanvas2d directory of BGRABitmap archive. Scripts are taken from the [Jean-Paul Davalan web site](https://web.archive.org/web/20190207062328/http://jean-paul.davalan.pagesperso-orange.fr/lang/jsc/js09.html) (Internet Archive link) which contains HTML Canvas examples.
142136
143137[[BGRABitmap tutorial 13|Previous tutorial (pixel coordinates)]] [[BGRABitmap tutorial 15|Next tutorial (3D)]]
144138
145139---
146-*From the Free Pascal wiki, page "BGRABitmap tutorial 14", as the Internet Archive kept it on 2024-12-09. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).*
140+*From the Free Pascal wiki, page "BGRABitmap tutorial 14", as it stood on 2023-05-21 after a change by Circular, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).*
141+Category: BGRABitmap
142+Category: Graphics

Back to history