1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import { Canvas, Image, Path2D } from "../mod.ts";
const canvas = new Canvas(300, 300);const ctx = canvas.getContext("2d");
ctx.filter = "brightness(70%) contrast(160%)";
const img = new Image("./testdata/skia_logo.png");const pattern = ctx.createPattern(img, "repeat");
// ctx.setLineDash([1, 2]);
ctx.shadowBlur = 20;ctx.shadowColor = "black";
const gradient = ctx.createConicGradient(0, 150, 150);
gradient.addColorStop(0, "red");gradient.addColorStop(0.25, "orange");gradient.addColorStop(0.5, "yellow");gradient.addColorStop(0.75, "green");gradient.addColorStop(1, "blue");
// ctx.fillStyle = gradient;
ctx.fillStyle = pattern ?? "white";ctx.fillRect(0, 0, 300, 300);
ctx.fillStyle = "black";
// Set line widthctx.lineWidth = 10;
// Wallctx.strokeRect(75, 140, 150, 110);
// Doorctx.beginPath();ctx.roundRect(130, 190, 40, 60, 8);ctx.closePath();ctx.fill();
// Roofctx.beginPath();ctx.moveTo(50, 140);ctx.lineTo(150, 60);ctx.lineTo(250, 140);ctx.closePath();ctx.stroke();
ctx.drawImage(  img,  5,  5,  img.width - 10,  img.height - 10,  50,  50,  img.width,  img.height,);
ctx.fillStyle = "skyblue";ctx.font = "40px sans-serif";ctx.textBaseline = "top";ctx.fillText("hello, skia text", 10, 10);
const path = new Path2D(  "M8 50H92C96.4183 50 100 53.5817 100 58V142C100 146.418 96.4183 150 92 150H8C3.58172 150 0 146.418 0 142V58C0 53.5817 3.58172 50 8 50Z",);ctx.strokeStyle = gradient;ctx.save();ctx.translate(10, 10);ctx.stroke(path);ctx.restore();
const data = ctx.getImageData(0, 0, 300, 300);ctx.putImageData(  data,  canvas.width - 100,  canvas.height - 100,  20,  20,  50,  50,);
const img2 = new Image();img2.src = canvas.toDataURL();ctx.drawImage(img2, canvas.width - 50, canvas.height - 50, 50, 50);
canvas.save("./testdata/test.png");console.log("done");