BGRABitmap tutorial 14: what changed

Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.

Title: BGRABitmap tutorial 14

New		Line
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.
2	+
3	+	## First program
4	+
5	+	Here is a very simple example:
6	+
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));
13	+
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);
18	+
19	+	bmp.Draw(Canvas,0,0);
20	+	bmp.Free;
21	+	end;
22	+	```
23	+
24	+	<table>
25	+
26	+	<tr>
27	+
28	+	<td bgcolor="#FFFFe0" style="border: 1px solid black; padding: 4px; text-align: center; border-radius:5px" width="30%">
29	+
30	+	Note that path fonctions are defined in the [[BGRABitmap Geometry types\|IBGRAPath interface]]. The <b>TBGRAPath</b> 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]].
31	+
32	+	</td>
33	+
34	+	</tr>
35	+
36	+	</table>
37	+
38	+	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.
39	+
40	+	The code above is equivalent to this Javascript code:
41	+
42	+	``` javascript
43	+	var canvas = document.getElementsByTagName("canvas")[0];
44	+	canvas.width = 200
45	+	canvas.height = 200
46	+	if (canvas.getContext){
47	+	var ctx = canvas.getContext("2d");
48	+	ctx.fillStyle = "rgb(240,128,0)";
49	+	ctx.fillRect(30,30,80,60);
50	+	ctx.strokeRect(50,50,80,60);
51	+	}
52	+	```
53	+
54	+	<figure>
55	+	<img src="BGRATutorial14a.png" title="BGRATutorial14a.png" />
56	+	<figcaption>BGRATutorial14a.png</figcaption>
57	+	</figure>
58	+
59	+	## Complex shapes
60	+
61	+	To draw a complex shape, it is necessary to define a path:
62	+
63	+	``` pascal
64	+	procedure pave();
65	+	begin
66	+	ctx.fillStyle ('rgb(130,100,255)');
67	+	ctx.strokeStyle ('rgb(0,0,255)');
68	+	ctx.beginPath();
69	+	ctx.lineWidth:=2;
70	+	ctx.moveTo(5,5);ctx.lineTo(20,10);ctx.lineTo(55,5);ctx.lineTo(45,18);ctx.lineTo(30,50);
71	+	ctx.closePath();
72	+	ctx.stroke();
73	+	ctx.fill();
74	+	end;
75	+
76	+	begin
77	+	bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,BGRA(210,210,210));
78	+	ctx := bmp.Canvas2D;
79	+	pave();
80	+	bmp.Draw(Canvas,0,0);
81	+	bmp.Free;
82	+	end;
83	+	```
84	+
85	+	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).
86	+
87	+	<figure>
88	+	<img src="Tutorial14b.png" title="Tutorial14b.png" />
89	+	<figcaption>Tutorial14b.png</figcaption>
90	+	</figure>
91	+
92	+	## Using transformations
93	+
94	+	Now we can draw the triangle six times with a rotation by calling transformation functions.
95	+
96	+	``` pascal
97	+	procedure six();
98	+	var
99	+	i: Integer;
100	+	begin
101	+	ctx.save();
102	+	for i := 0 to 5 do
103	+	begin
104	+	ctx.rotate(2*PI/6);
105	+	pave();
106	+	end;
107	+	ctx.restore();
108	+	end;
109	+	begin
110	+	bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,BGRA(210,210,210));
111	+	ctx := bmp.Canvas2D;
112	+	ctx.translate(80,80);
113	+	six;
114	+	bmp.Draw(Canvas,0,0);
115	+	bmp.Free;
116	+	end;
117	+	```
118	+
119	+	<figure>
120	+	<img src="BGRATutorial14c.png" title="BGRATutorial14c.png" />
121	+	<figcaption>BGRATutorial14c.png</figcaption>
122	+	</figure>
123	+
124	+	## Gradients and memory usage
125	+
126	+	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:
127	+
128	+	``` pascal
129	+	var
130	+	grad: IBGRACanvasGradient2D;
131	+	begin
132	+	grad := ctx.createLinearGradient(0,0,320,240);
133	+	grad.addColorStop(0.3, '#ff0000');
134	+	grad.addColorStop(0.6, '#0000ff');
135	+	ctx.fillStyle(grad);
136	+
137	+	grad := ctx.createLinearGradient(0,0,320,240);
138	+	grad.addColorStop(0.3, '#ffffff');
139	+	grad.addColorStop(0.6, '#000000');
140	+	ctx.strokeStyle(grad);
141	+	ctx.lineWidth := 5;
142	+
143	+	ctx.moveto(160,120);
144	+	ctx.arc(160,120,100,Pi/6,-Pi/6,false);
145	+	ctx.fill();
146	+	ctx.stroke();
147	+	end;
148	+	```
149	+
150	+	The grad variable is assigned with the gradient objects, but there is no call to Free.
151	+
152	+	<figure>
153	+	<img src="BGRATutorial14d.png" title="BGRATutorial14d.png" />
154	+	<figcaption>BGRATutorial14d.png</figcaption>
155	+	</figure>
156	+
157	+	## More examples
158	+
159	+	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.
160	+
161	+	[[BGRABitmap tutorial 13\|Previous tutorial (pixel coordinates)]] [[BGRABitmap tutorial 15\|Next tutorial (3D)]]
162	+
163	+	---
164	+	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).
165	+	Category: BGRABitmap
166	+	Category: Graphics

Back to history